User Guide Cancel

Using ColdFusion components in Dreamweaver

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Note:

Support for ColdFusion is removed in Dreamweaver and later.

About ColdFusion components

ColdFusion component (CFC) files let you encapsulate application and business logic into self‑contained, reusable units. CFCs also provide a fast, easy way to create web services.

A CFC is a reusable software unit written in ColdFusion markup language (CFML), which makes it easy to reuse and maintain your code.

You can use Dreamweaver to work with CFCs. For information on CFC tags and syntax, see the ColdFusion documentation from within Dreamweaver (Help > Using ColdFusion).

Note:

You can use CFCs only with ColdFusion MX or later. CFCs are not supported in ColdFusion 5.

CFCs are meant to provide a simple yet powerful way for developers to encapsulate elements of their websites. Generally, you should use components for application or business logic. Use customs tags for presentation elements such as customized greetings, dynamic menus, and so on.

As with many other types of construction, dynamic sites can often benefit from interchangeable parts. For example, a dynamic site may run the same query repeatedly, or calculate the total price of shopping cart pages and recalculate it every time an item is added. These tasks can be handled by components. You can fix, improve, extend, and even replace a component with minimal impact to the rest of your application.

Suppose an online store calculates shipping charges based on the price of orders. For orders under $20, the shipping charge is $4; for orders between $20 and $40, the shipping charge is $6, and so on. You could insert the logic for calculating the shipping charge in both the shopping cart page and the checkout page, but that would mix HTML presentation code and CFML logic code and generally make the code difficult to maintain and reuse.

You decide to create a CFC called Pricing that has, among other things, a function called ShippingCharge. The function takes a price as an argument and returns a shipping charge. For example, if the value of the argument is 32.80, the function returns 6.

In both the shopping cart page and the checkout page, you insert a special tag to invoke the ShippingCharge function. When the page is requested, the function is invoked and a shipping charge is returned to the page.

Later, the store announces a special promotion: free shipping for all orders above $100. You make the change to the shipping rates in one place—the ShippingCharge function of the Pricing component—and all the pages using the function automatically get accurate shipping charges.

Components panel overview (ColdFusion)

Use the Components panel (Window > Components) to view and edit ColdFusion components, and add code in the page that invokes the function when the CFM page is requested.

Note:

The Components panel is available only when viewing a ColdFusion page in Dreamweaver.

Create or delete a CFC in Dreamweaver

You can use Dreamweaver to visually define a CFC and its functions. Dreamweaver creates a .cfc file and inserts the necessary CFML tags for you.

Note:

Depending on the component, you may have to complete some code by hand.

  1. Open a ColdFusion page in Dreamweaver.

  2. In the Components panel (Window > Components), select CF Components from the pop‑up menu.

  3. Click the Plus (+) button, and complete the Create Components dialog box, and click OK.

    a.In the Components section, enter the details about the component. Here is a partial list:

    Name  Specifies the filename of the component. The name must contain only alphanumeric characters and underscores (_). Don’t specify the .cfc file extension when entering the name.

    Component Directory  Specifies where the component is saved. Select the web application’s root folder (such as \Inetpub\wwwroot\myapp\) or any of its subfolders.  

    b.To define one or more functions for the component, select Functions from the Section list, click the Plus (+) button, and enter the details of the new function.

    Ensure that you specify the type of the value returned by the function in the Return Type option.

    Note:

    If you select remote from the Access menu, the function becomes available as a web service.

    c.To define one or more arguments for a function, select Arguments from the Section list, select the function from the pop‑up menu, click the Plus (+) button, and enter the details of the new argument on the right.

  4. If you use a remote development server, upload the CFC file and any dependent files (such as those used to implement a function or include files) to the remote server.

    Uploading the files ensures that Dreamweaver features such as Live view and Preview In Browser work properly.

    Dreamweaver writes a CFC file and saves it in the folder you specified. The new component also appears in the Components panel (after clicking Refresh).

  5. If you use a remote development server, upload the CFC file and any dependent files (such as those used to implement a function or include files) to the remote server.

View CFCs in Dreamweaver

Dreamweaver provides a way to visually examine the ColdFusion components (CFCs) located in your site folder or on the server as a whole. Dreamweaver reads the CFC files and displays information about them in an easy-to-navigate tree view in the Components panel.

Dreamweaver looks for the components on your testing server (see Connecting to the database in Dreamweaver). If you create CFCs or make changes to existing CFCs, make sure to upload the CFC files to the testing server so they are accurately reflected in the Components panel.

To view components located on another server, change the testing server settings.

You can view any of the following information about your CF components:

  • List all of the ColdFusion components defined on the server.

  • If you’re running ColdFusion MX 7 or later, filter the list to show only the CFCs located in your site folder.

  • Explore the functions and arguments of each component.

  • Inspect the properties of functions that serve as web services.

Note:

To use Dreamweaver to inspect CFCs residing in the server root while also managing your site files in a different website root, you can define two Dreamweaver sites. Set the first site to point to the server root and the second to point to the website root. Use the site pop-up menu on the Files panel to switch quickly between the two sites.

To view CFCs in Dreamweaver, follow these steps:

  1. Open any ColdFusion page in Dreamweaver.
  2. In the Components panel (Window > Components), select CF Components from the pop‑up menu.
  3. Click the Refresh button in the panel to retrieve the components.

    The components package is displayed on the server. A component package is a folder that contains CFC files.

    If existing component packages do not appear, click the Refresh button in the panel toolbar.

  4. To display only the CFCs located in your site folder, click the Show Only Current Site’s CFCs button in the Components panel toolbar.
    Note:

    This feature is available only if you’ve defined a computer running ColdFusion MX 6 or later as a testing server for Dreamweaver.

    Note:

    If the current site is listed in a virtual folder on the remote server, the filtering does not work.

  5. Click the Plus (+) button beside the package name to view the components stored in the package.
    • To list the functions of a component, click the Plus (+) button beside the component name.

    • To see the arguments a function takes, as well as the arguments’ type and whether they are required or optional, open the function’s branch in the tree view.

      Functions that take no arguments have no Plus (+) button beside them.

    • To quickly view the details of an argument, a function, a component, or a package, select the item in the tree view, and click the Get Details button in the panel toolbar.

      You can also right-click (Windows) or Control-click (Macintosh) the item and select Get Details from the pop‑up menu.

      Details about the item are displayed in a message box.

Edit CFCs in Dreamweaver

Dreamweaver provides a streamlined way of editing the code of the ColdFusion components defined for your site. For example, you can add, change, or delete any component function without leaving Dreamweaver.

To use this feature, your development environment must be set up as follows:

  • ColdFusion must be running locally.

  • In the advanced Site Definition dialog box in Dreamweaver, the Access type specified in the Testing Server category must be Local/Network.

  • In the advanced Site Definition dialog box, the path of your local root folder must be the same as the path of the testing server folder (for example, c:\Inetpub\wwwroot\cf_projects\myNewApp\). You can examine and change these paths by selecting Site > Edit Sites.

  • The component must be stored in the local site folder or any of its subfolders on your hard disk.

Open any ColdFusion page in Dreamweaver and display the components in the Components panel. To display the components, open the Components panel (Window > Components), select CF Components from the panel’s pop‑up menu, and click the Refresh button on the panel.

Because ColdFusion is running locally, Dreamweaver displays component packages on your hard disk.

Use the following procedure to edit a component.

  1. Open any ColdFusion page in Dreamweaver and display the components in the Components panel (Window > Components).
  2. Select CF Components from the panel’s pop‑up menu, and click the Refresh button on the panel.

    Because ColdFusion is running locally, Dreamweaver displays component packages on your hard disk.

    Note:

    To edit the CFC recordset visually, double-click it in the Bindings panel.

  3. To edit a component file generally, open the package and double-click the component name in the tree view.

    The component’s file opens in Code view.

  4. To edit a specific function, argument, or property, double-click the item in the tree view.
  5. Make your changes by hand in Code view.
  6. Save the file (File > Save).
  7. To see any new function in the Components panel, refresh the view by clicking the Refresh button on the panel toolbar.

Build web pages that use CFCs

One way to use a component function in your web pages is to write code in the page that invokes the function when the page is requested. You can use Dreamweaver to help you write this code.

Note:

For other ways to use components, see the ColdFusion documentation from within Dreamweaver (Help > Using ColdFusion).

  1. In Dreamweaver, open the ColdFusion page that will use the component function.
  2. Switch to Code view (View > Code).
  3. Open the Components panel (Window > Components), and select CF Components from the panel’s pop‑up menu.
  4. Find the component you want and insert it using one of the following techniques:
    • Drag a function from the tree view to the page. Code is inserted in the page to invoke the function.

    • Select the function in the panel and click the Insert button on the panel toolbar (the second button on the right). Dreamweaver inserts the code in the page at the insertion point.

  5. If you insert a function that has arguments, complete the argument code by hand.

    For more information, see the ColdFusion documentation from within Dreamweaver (Help > Using ColdFusion).

  6. Save the page (File > Save).

Define a recordset in a CFC

Dreamweaver can help you define a recordset (also known as a ColdFusion query) in a ColdFusion component (CFC). By defining a recordset in a CFC, you don’t need to define the recordset on each page that uses it. You define the recordset once in the CFC and use the CFC on different pages.

Note:

This feature is available only if you have access to a computer running ColdFusion MX 7 or later. For more information, see Enable the ColdFusion enhancements.

 

  1. Create or open an existing CFC file in Dreamweaver.
  2. In the Bindings panel (Window > Bindings), click the Plus (+) button and select Recordset (Query) from the pop‑up menu.

    The Recordset dialog box appears. You can work in either the simple or the advanced Recordset dialog boxes.

  3. To use an existing function in the CFC, select the function from the Function pop‑up menu and skip to step 5.

    The recordset is defined in the function.

  4. To define a new function in the CFC, click the New Function button, enter a name for the function in the dialog box that appears, and then click OK.

    The name must contain only alphanumeric characters and underscores (_).

  5. To define a recordset for the function, complete the Recordset dialog box options.

    The new function is inserted into the CFC that defines the recordset.

Use a CFC recordset as a source of dynamic content

You can use a ColdFusion component (CFC) as a source of dynamic content for your pages if the component contains a function defining a recordset.

Note:

This feature is available only if you have access to a computer running ColdFusion MX 7 or later. For more information, see Enable the ColdFusion enhancements.

  1. Open a ColdFusion page in Dreamweaver.
  2. In the Bindings panel (Window > Bindings), click the Plus (+) button and select Recordset (Query) from the pop‑up menu.

    The Recordset dialog box appears. You can work in either the simple or the advanced Recordset dialog box.

  3. Click the CFC Query button.
  4. Complete the CFC query dialog box, click OK, and then click OK again to add the CFC recordset to the list of available content sources in the Bindings panel.
  5. Use the Bindings panel to bind the recordset to various page elements.

    For more information, see Adding dynamic content to pages.

Define dynamic content by using a CFC

You can define a recordset as a source of dynamic content in Dreamweaver by using a CFC that contains a recordset definition.

1.In the Name box, enter a name for the CFC recordset.

A common practice is to add the prefix rs to recordset names to distinguish them from other object names in the code, for example: rsPressRelease.

Recordset names must contain only alphanumeric characters and underscores (_). You cannot use special characters or spaces.

2.Select a package from the ones already defined on the server.

If the package does not appear in the pop‑up menu, you can refresh the list of packages by clicking the Refresh button near the pop‑up menu.

Make sure you upload your CFCs to the testing server first. Only CFCs on the testing server are displayed.

3.Select a component from the ones defined in the currently selected package.

If the Component pop‑up menu does not contain any components, or if none of your previously created components appear in the menu, you should upload the CFC files to the testing server.

4.(Optional) To create a component, click the Create New Component button.

a.In the Name box, enter the name for the new CFC. The name must contain only alphanumeric characters and underscores (_).

b.In the Component Directory box, enter the location for your CFC, or browse to locate the folder.

Note:

The folder must be the relative path to the site root folder.

5.From the Function pop‑up menu, select the function that contains the recordset definition.

The Function pop‑up menu contains only the functions defined in the currently selected component. If no function appears in this pop‑up menu, or if your last changes are not reflected in the currently listed functions, check that your last changes were saved and uploaded to server.

Note:

The Connection and SQL boxes are read-only.

6.Edit each parameter (type, value, and default value) that must be passed as a function argument by clicking the Edit button.

a.Enter a value for the current parameter by selecting the value type from the Value pop‑up menu and entering the value in the box to the right. The value type can be a URL parameter, a form variable, a cookie, a session variable, an application variable, or an entered value.

b.Enter a default value for the parameter in the Default Value box. If no run-time value is returned, the default parameter value is used.

c.Click OK.  

You cannot modify the database connection and the SQL query for the recordset. These fields are always disabled—the connection and SQL query are displayed for your information.

7.Click Test to connect to the database and create an instance of the recordset.

If the SQL statement contains page parameters, ensure that the Default Value column of the Parameters box contains valid test values before clicking Test.

If the query was executed successfully, a table displays the recordset. Each row contains a record and each column represents a field in that record.

Click OK to clear the CFC Query.

8.Click Ok.

Get help faster and easier

New user?