To put it quite simply, an array is like a list, on STEROIDS. Another way of looking at arrays is to think of them as tables created by code and floating in the server memory instead of in a database. Arrays, can be one dimensional (which is the same as a list), two dimensional (think of a table or spreadsheet with multiple columns and multiple rows), or three dimensional. 3D arrays are complex and frankly make my head hurt. But if you're a glutton for punishment you can learn more about 3D arrays at
Macromedia Live Docs.
For the purpose of creating array driven menus we'll be working with 2D arrays. There are MANY reasons why arrays are useful. In the case of array driven menus or lists, they save a lot of time coding and updating pages where the the only thing changing is the actual content and not the code.
For example, let's take a look at our own
Tutorials Menu page here at MAXO Studios. If you look at this page you'll notice that page is basically a list of tutorial categories and we display each category the same way. It has a Title, a Description, and a link which it takes you to if you click on the title. We also do certain coding and fomating to display each category. For example, the title is in orange, it has a link attribte and certain roll-over behaviors, the Description comes below the title and is in plain text, so on and so on. Now if we were constantly modifying this data, updating descriptions, and adding or removing categories, the portion of the updates dealing with the formatting and behavior of the data would become tedious, afterall, once I decide I want the links to be Orange I don't want to have to state this over and over again each time I add a category.
Now, stylesheets are a great help in improving this type of display behavior reusability but we'll take this example one step further. We're going to pull all our category info in an array and loop through it to display the page content.
Let's begin by creating and populating the menu array:
<cfset MenuArray = ArrayNew(2)>
<cfset MenuArray [1][1] = "ColdFusion">
<cfset MenuArray [1][2] = "Tutorials.cfm?Mode=CF">
<cfset MenuArray [1][3] = "Some tips on how to leverage the power and flexibility of server-side scrpting to add robust functionality, database connectivity, and dynamic content to your web applications.">
<cfset MenuArray [2][1] = "Javascript">
<cfset MenuArray [2][2] = "Tutorials.cfm?Mode=JS">
<cfset MenuArray [2][3] = "Benefit from client-side document manipulation and form validation. Save time and bandwidth by avoiding unnecessary trips to server for simple user interface related tasks.">
<cfset MenuArray [3][1] = "Data Modeling">
<cfset MenuArray [3][2] = "Tutorials.cfm?Mode=DM">
<cfset MenuArray [3][3] = "The Holly Grail of database design is normalization. Learn how to optimize your data structures and improve query performance.">
<cfset MenuArray [4][1] = "PhotoShop">
<cfset MenuArray [4][2] = "Tutorials.cfm?Mode=PS">
<cfset MenuArray [4][3] = "Learn photo and bitmap manipulation for optimal image development for web as well as print media. Manipulate size, resolution, transparency, and learn how and when to export to various file types.">
In the first line, we're simply declaring our array and indicating that it is a 2 dimensional array. Next we begin populating it. Notice that every time we assign a value to our array we indicate the 2 dimensions to which the value is assigned. This is similar to indicating which row and column in a table or spreadsheet a value would go into. Think of the first number as the row and the second number as the column. As you can see, columns 1, 2, and 3 are Title, Link, and Description respectively.
Now that we have our array populated we can loop through it and display our data:
<cfoutput>
<cfloop from="1" to="#ArrayLen(MenuArray)#" index="MenuItem">
<a href="#MenuArray[MenuItem][2]#" class="Body_Link">#MenuArray[MenuItem][1]#</a>
<br />
#MenuArray[MenuItem][3]#
<p />
</cfloop>
<cfoutput>
First, we started a loop making sure it iterates once for every item in the array. We did this by specifying the length of the array as the loop limit (4 in this case). Next, while inside the loop, we applied our standard code and formatting to the various Array elements (title, link, description). As you can see, if I had 100 elements in my array and decided that I wanted the link to have a class of "Cool_Link" instead of "Body_Link", I would only have to fix one line of code instead of 100. Similarly, if a few categories were added or removed I could simply add the content to the array without worrying about the formatting.
You can also use loops to populate (vs display) array data. For example if you wanted to populate the content of a table into an array and maintain it as a session variable to avoid repeated trips to the database.
Well, I hope you found this useful. Keep on keepin' on.