|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Extending Dreamweaver: Let Dreamweaver Create Your Menus
Basically, we're creating a function which scans the content of a folder and calls itself when it encounters another folder. Thus we make sure to get the complete directory structure under a given root folder.
Step 2: Rebuild the Directory Structure
One thing you should be aware of are Dreamweaver's files, such as
If you're wondering why we're not directly creating the HTML code, I'll be covering that in future columns, along with concepts including feeding data like this directly to an graphical application like Fireworks and creating your own site maps with a single click.
Step 3: Create the Menu's Code
Aside from a few caveats, let's look at what we need to do to finish this exercise. First, we must be able to model a hierarchical structure, i.e., use indentation to show relations between items. The next thing is to create a mechanism to open and close folders. Both problems are solved easily with CSS.
Remember the way CSS lays out its contents? It makes a distinction between boxes and inline elements. Basically, the difference is that a box always occupies a rectangular area on the screen and wants to reside on its own line, whereas inline elements flow on the page. So to create an indented tree structure, we simply use boxes with a margin to the left. Both files and folders go into the generic box element
In order to make the tree become "live," folders are treated specially. The difference is that a folder, naturally, contains more items. The name of the folder is always visible; the contents may not be. Actually, a folder must be represented by two containers -- the first one takes the folder's name and an icon, the second one holds the contents of the folder.
When you have such a link, the trick is to pass the ID of the element, which serves as the container for the folder's content. So the folder's content becomes visible or invisible, but the name always stays. Additionally, a small plus or minus sign shows the state of the folder. But how do we create a really individual ID?
Once again, recursion is the solution. The code is recursive, already; we only add a few snippets of code. The trick is to create an ID of the current folder's location inside the tree. Consider the root folder having ID "0." The first parent item can be addressed as "0.1." The second one might be a folder; it has ID "0.2." The child items of this folder can be addressed by "0.2.1," "0.2.2," etc. We're passing a initial value of "0" to the first call of
After climbing through the folder structure, the function