Cold Fusion Tutorial for Sothink DHTML Menu Builder


Software used in this tutorial:
  • Cold Fusion MX
  • Sothink DHTML Menu Builder 4.2 (build 30519)
  • Microsoft Access


    Basic assumptions:
  • You understand how to use/administer Cold Fusion.
  • You understand MS Access (or another database application).
  • You understand SQL.
  • You understand HTML and Javascript.


    Intro:
    This is a tutorial that I decided to write because I thought that it would be helpful for other Cold Fusion and Sothink DHTML Menu builders (and there was a request for a tutorial). This is not an extensive tutorial, but it will allow for you to get information from your database to your menu. Its up to you with what you do from there. This tutorial will following the images and database that is provided in the tutorial zip file.





    Step One: Creating the Menu
    1. When you add menu condition, you may get a warning message in DHTMLMenu. That's because the condition code is server-side code which can not be processed by the browser directly. The warning will not show when you add the menu to an asp page that is supported by server. You can disable the Auto-Refresh option by unchecking "Preview >Enable Auto-Refresh" to avoid seeing the warnings or add the JavaScript comment delimiters /* and */ to the Prefix as well as Suffix, for example:
      Prefix:
      /*
      <CFQUERY Name= .....
      */
      Suffix:
      /*
      </CFOUTPUT>
      */
    2. Create your menu (see Figure 1).
    3. Create a submenu which will hold the information that you want from the database. In the input field, choose "Text" and then put in the Cold Fusion code that will display what information you want in the menu (see Figure 2). In other words, this is the code that you would normally put to display a variable in Cold Fusion (after all, you're wanting to display info in the menu, right?).
    4. Click on the "Edit Condition" button, and then select "Edit Condition" (see Figure 3 & Figure 4).
    5. Put your <CFQUERY="whatever" datasource="sample"> and <CFOUTPUT QUERY="whatever"> tags within the "Prefix" window, and put your closing </CFOUTPUT> tag in the "Suffix" window (Figure 5 & Figure 6).
    6. Make sure the "This item may be invisible at run-time" check box is checked.
    7. Click OK.
    8. Put your links in the "Link" area how you would normally create a link that gets generated from the Cold Fusion language (Figure 7).
    9. Repeat these steps until you have created your menu (Figure 8).
    NOTE:
    There are only three tables in this tutorial, but go through and create your menu however you need it.





    Step Two: Publishing

    NOTE:
    I choose to create and call the menu by using <CFINCLUDE TEMPLATE="menu.cfm">. I do it this way so that I only have to change one file (menu.cfm) anytime I want to change the menu and have it updated on every page. You may want to do it differently.

    Once you have your menu created, you will need to publish it.

    1. Create a BLANK page called "menu.cfm" (or whatever you want to call it).
    2. Use the "View or Copy Code" in the publishing wizard to view/copy the menu code (see Figure 9), and put that code into the "menu.cfm" page, then save the file.
    3. You will need to make sure that you put the code that goes in the HEAD tags (Figure 10) into the page(s) that will use the menu, NOT the menu.cfm page (if you forget to put this in the page, the menu will not work).
    4. Use a <CFINCLUDE> to call the "menu.cfm" file wherever you want the menu to show. This way you will only have to edit the "menu.cfm" page any time you want to change your menu (Figure 11).

    NOTE:

    Cold Fusion uses the # sign to display a variable (ie: #FirstName# to display a first name variable). However, the # sign is also placed in front of a color attribute (ie: #ffffff for the color "white"). This will create a critical error when the color attribute is between the <CFOUTPUT> and </CFOUTPUT> tags. As a result, you will need to go into the code and manually add another # in front of any color attribute (ie: ##ffffff) after the menu has been published.




    Step Three: Test the Menu

    1. Have/put everything in your Cold Fusion 'www' folder (ie: C:\Cold Fusion\www)....or wherever you run your tests from.
    2. Go into the Cold Fusion administration page and setup/connect your database.
    3. Test the menu. It should now generate information from the database and put it into a menu. It should look something like Figure 12, Figure 13, Figure 14.






    Conclusion:

    That's it! Its a basic tutorial, but hopefully that will give you the foundation to create your own database driven menu. If you get lost, refer to the pages and database that is included in this tutorial.