Dreamweaver Article

Adding Ajax components to Dreamweaver projects

Nitobi recently added support for Dreamweaver Extensions to its suite of Ajax components, enabling Dreamweaver users to drag and drop these components into their projects.

This article describes how to integrate a spreadsheet component, Nitobi Grid, and highlights some of the extensions' features.

Requirements

To complete this tutorial you will need to install the following software:

Dreamweaver CS3

• Try
• Buy

Nitobi Complete UI

• Download

Nitobi CUI Dreamweaver Extensions

• Included in the Nitobi Complete UI download linked above

ColdFusion 8

• Try
• Buy

Sample files

• contacts_nitobi_ajax.zip

Prerequisites

You should know how to setup a ColdFusion site in Dreamweaver.

Setup procedure

Create a new CFM site and copy the MDB file into the site root. The MDB file is included in the contacts_nitobi_ajax.zip.

You must also ensure you have RDS enabled in your instance of ColdFusion Server to properly connect to datasources from Dreamweaver. You can enable it in the Security section of the ColdFusion Administrator application.

Insert Bar Objects

All the Nitobi components can be inserted into a page using their respective insert bar objects. Using these objects will insert all the required assets/code/markup into your page/site.

1. We'll start by creating a new CFM file in our site called grid.cfm.

2. With the grid.cfm file open, choose the insertion point and click on the Grid icon in the Nitobi section of the Insert Bar. This will start a multi-step wizard to configure the Grid (see Figure 1).

   

   Figure 1. The multi-step wizard to configure the Grid

3. The first step is to specify a database to connect to and which table to use to supply data to the Grid.

   1. Click the "Define" button to setup a database connection.
   2. Click the "New" button and choose "Microsoft Access Connection"
   3. For "CF Data Source Name", type in SampleContactsDB.
   4. For "Database File", you should type in the path to the MDB file that you copied to the root of the site.
      E.g., it would be something like C:\Inetpub\wwwroot\cfmtestsite\ContactsFlatfile3k.mdb

   5. Type in your ColdFusion username and password into the appropriate fields.

      

      Figure 2. Configuring the Microsoft Access Connection dialog box

   6. Click OK to create the connection.
   7. Back in the Nitobi Grid wizard, our new "SampleContactsDB" connection will be available in the "Connection" list. Choose it.
   8. The "Table" field will be populated automatically with the tables in SampleContactsDB, which in this case is just tblContacts3k. Choose it.
   9. Choose "ContactID" as the key for this table.
   10. Choose MS Access as the "Database Type".
   11. Click "Next"
4. On the second page of the wizard, you can define the way the Grid's columns are displayed. (by default, all of the fields in the source table are returned to the Grid, in the order they're found in the table, as textcolumns of width 100) (See Figure 3).

   1. We'll just leave the default columns for now and click "Next".

      

      Figure 3. Defining the way the Grid's columns are displayed

5. In the last step of the wizard, we can specify some Grid properties. (See Figure 4)
   1. In the "Id" field, type in grid1. (The id is required to initialize the Grid properly when the page loads).

   2. Let's leave the rest of the properties at their default values and click "Finish".

      

      Figure 4. Specifying some Grid properties

6. When the wizard finishes, it will insert the following code into your page:

   • A script tag for the Nitobi Toolkit (nitobi.toolkit.js)
   • A script tag for the Grid's javascript file (nitobi.grid.js)
   • A link tag for the Grid's stylesheet (nitobi.grid.css)
   • Initialization code:
     • nitobi.html.attachEvent(window,"load",function(){nitobi.loadComponent("grid1")});
   • The Grid's declaration
   • XML namespace declaration to the html tag (xmlns:ntb=http://www.nitobi.com)
7. The wizard also automatically adds the required assets to your site under Nitobi/Assets/script and Nitobi/Assets/style
8. The wizard also creates two backend scripts, grid.load0.asp and grid.save0.asp, that are responsible for supplying data from the database to the grid and saving changes back to the database.
   1. Be sure to remember to upload these handlers to your remote site.
9. Go ahead and save the file and preview it.

Design Time Preview

Finally, every Nitobi component with a declaration also provides a design time preview. The preview will try to accurately represent what the actual rendered component will look like. For example, if you change the dimensions of the Grid, the design preview will change to match (See Figure 5).

Figure 5. A design time preview of the Nitobi  Grid component

Property Inspector

Each Nitobi component with a declaration (all but Spotlight and Callout) has a Property Inspector which gives you quick design time access to frequently accessed attributes (See Figure 6).

Figure 6. The Property inspector gives you quick design time access to frequently accessed attributes of  Nitobi components

Tag Library

But because a lot of the components have more properties than there is space for in a Property Inspector, we also include tag libraries for every Nitobi tag. This of course allows for code completion in Code View.

Where to go from here

You can find additional information on these extensions at the Nitobi Support Center and screencasts can be found at http://nitobi.com/kb/?catid=97

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

About the authors