Trinity:
I’ve come across a similar situation when using Visio for highly-interactive wireframing where the final product is delivered as html; and when the need is great, I resort to a brute force solution. At first I did it for drilldowns on dashboard mockups where only one section of the screen changed, but I used it subsequently for radio buttons, checkboxes, dropdowns, and worse. (The squeamish coder should drop off now… This gets ugly!)
Let’s take the simple example of a checkbox. You want to click on it in the browser and have the checkmark appear, then click on it again to uncheck it. Here’s the basic process:
1. Create your mockup page in Visio with the box unchecked.
2. Copy the entire page verbatim to a new page.
3. Modify that page to have the box checked.
4. Hyperlink the unchecked checkbox to the page with the checked checkbox and versa vice.
5. Save the drawing as a web page (see
how I do that using VBA, as well as
how to add hover text, if you need it.)
Voila! Click on the checkbox in the browser and it gets checked; click on it again and it gets unchecked.
Dropdowns work the same way, but get a bit more complicated.
1. Create the main mockup page where the dropdown is not dropped down.
2. Copy the entire page verbatim to a new page.
3. Modify that page to show the dropdown list dropped down, where each member of the dropdown list is a separate shape.
4. Copy the page N times (where N is the number of choices in your dropdown list) and on each page have only the selected dropdown choice in your dropdown box.
5. Hyperlink each dropdown choice in your list (from step 3) to the appropriate page created in the previous step.
6. Hyperlink the dropdown on each of the N pages back to the full list created in step 3.
7. Save the beast as a web page.
Voici! Click on the dropdown in the browser, and it drops down. Click on one of the dropdown choices, and it becomes the one selected. Click on it again and the full dropdown list reappears.
Of course this approach works easiest when you only have a few checkboxes or dropdowns, because if you have a lot of them you can end up creating a whole slew of pages to encompass all the various permutations of selections. (I warned you it could get ugly!) To limit the ugliness and make maintenance easier, I always take the unchanging part of the mockup and move it to a background page such that only the dropdowns, checkboxes, etc. need to be on each page. Still, it can get messy.
One thing to watch out for is that the browser tends to re-size the page based on the scope of the real estate being used, which can destroy the illusion of the active dropdowns. To avoid that problem, on the furthest-back background page I put a virtually-invisible 0.1 point period in each of the four corners to define the boundaries of the drawing. That way, the browser is fooled into thinking all the pages are the same size and never re-sizes things. Just be sure you never step outside those limits.
I have
an example of this approach out on the web; and while it does not use checkboxes or dropdowns, it does show how seamlessly the navigation can appear to the user. Click on the red text near the top left to see what I mean.
I realize this brutish approach does not address all your concerns, but it does let dropdowns and other homemade widgets interact. If you figure out how to do data entry or access a database, please let me know!
- Ken
