Home > ColdFusion, Web Application Development > Fuseboxing progress – Navigation menu

Fuseboxing progress – Navigation menu

I’ve been working to convert my church’s old site to Fusebox 4 for ColdFusion in order to get cleaner, more modular code and to make maintenance simpler for parish staff.  I started off diagramming a database schema in which the content would be stored.  This got me thinking about just how the site would work when finished.  I then dropped the core FB4 files into my local webroot and started working.

With a schema in place, I was able to determine the necessary circuit.

  • home – this is the default circuit
  • sections – drives the navigation menu
  • pages – handles page content
  • news – drives the news module
  • links – drives the links module
  • contacts – drives the parish contacts module
Current static navigation menu

Current static navigation menu

I began with the sections circuit and began coding fuseactions. The sections circuit will be the foundation for the navigation menu.  Each section corresponds to a link in the navigation.  I added a ‘parent’ to facilitate subsections which will appear as flyouts.  I then began writing the sections CFC which will access the data.  The section CFC contains your basic CRUD methods and one special method to handle subsections.   Right now, since there is only test data in the DB, the menu isn’t fully populated with subsections.  I should note, that I first considered using the built in ColdFusion 8 <cfmenu> and <cfmenuitem> tags to generate the menu.  I actually built the menu, but then decide to go back to the CSS/JavaScript that is used in the current site.  All I had to do was invoke the section CFC to display the section data as links in the navigation menu.

Dynamically generated fusebox navigation

Dynamically generated fusebox navigation

Using the Frameworks explorer in CFEclipse, it was really easy to create circuit files and their corresponding fuseactions.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: