| It's time to start floating! As in other chapters, we'll experiment with basic settings and, along the way, create some nice framework code to build on in the workshops. Task 1: Create a really basic floater We're talking really basic hereit will amaze you how very little there can be to a floating panel. -
Create the file first. In your text editor, create a new file with the basic HTML framework. Because you have to modify the menus.xml file, use a text editor other than Dreamweaver for this (remember, you should keep Dreamweaver closed when editing the menus .xml file). For adornment, add only a <title> and a sentence or two in the <body> , like this: <html> <head> <title>Test Floater</title> </head> <body> This is a test. </body> </html> Save the file in the Configuration/ Floaters folder. Call it floatme.htm . -
Next , add a menu entry so you can access your floater. In your text editor, open menus.xml and navigate to the section controlling the Window menu. The last entry in the Window menu is a dynamically generated list of open windows . You want to add your items above this, so add the following lines of code directly above the <separator/> that marks off the open window list (new code is in bold): <menuitem name="Previous Document" platform="mac" key="Ctrl+Shift+Tab"enabled="dw.getFocus() == 'textView' dw.getFocus() == 'document'" command="dw.goToPrevDocument()" id="DWMenu_Window_PrevDocument"/> <separator /> <menuitem name="Float Me" enabled="true" command="dw.toggleFloater('floatme')" checked="dw.getFloaterVisibility('floatme')" id="MyStuff_FloatMe" /> <separator /> <menuitem dynamic name="(No Open Documents)" file="Menus/MM/Window_Titles.htm" id="DWMenu_Window_Default" /> </menu> tip Perform a find operation on DWMenu_Window_Default , which is the ID of the last command in the menu. This code adds your menu item, with a separator line above it. There should already be a separator line below it. By using the "floatme" parameter, you're using your floater file's name minus its extension as its floater name. With the command attribute, you're accessing dw.toggleFloater() to alternately open and close your floater. With the checked attribute, you're using dw.getFloaterVisibility() as a test whether your floater is currently open; if it is open, your menu item will display with a nice little checkmark next to it. -
Try it out! Relaunch Dreamweaver. Your Window menu and new floating panel should look like the one shown in Figure 7.4. Figure 7.4. A very basic floater (floatme), up and running in the Dreamweaver interface. Note the checkmark in the menu, indicating that the floater is currently open. Choosing the command again toggles it closed.  As you examine your new floater, pay attention to its default characteristics, including where the floater first appears onscreen and what its dimensions are. The title bar shows a tab with your page <title> , in its own group named the same thing; and the background is gray, but the text displays with formatting, even though you didn't add text formatting to your floater code. Resize your floater. Move it around the screen. Then, quit Dreamweaver and relaunch it. You'll see that the settings for size and position have been remembered for you. Dreamweaver even remembers whether your floater was open or closed when the program quit. Task 2: Experiment with the API functions We want to see how some of the other API functions for floaters work, but we can't do it with floatme because it's already been opened. So in this task, we'll create two new floaters tabfloat1 and tabfloat2 . -
Open menus.xml and add two new <menuitem/> entries directly below the "Float Me" entry you just added: <separator /> <menuitem name="Float Me" enabled="true" command="dw.toggleFloater('floatme')" checked="dw.getFloaterVisibility('floatme')" id="MyStuff_FloatMe" /> <menuitem name="Tabbed Floater 1" enabled="true" command="dw.toggleFloater('tabfloat1')" checked="dw.getFloaterVisibility('tabfloat1')" id="MyStuff_TabFloat1" /> <menuitem name="Tabbed Floater 2" enabled="true" command="dw.toggleFloater('tabfloat2')" checked="dw.getFloaterVisibility('tabfloat2')" id="MyStuff_TabFloat2" /> <separator /> -
In your text editor, save floatme.htm as tabfloat1.htm (still in the Configuration/Floaters folder). Make the following changes to the code (new code is in bold): <html> <head> <title> Tab 1 </title> <script language="JavaScript"> function initialTabs() { window.resizeTo(300,400); return "tabfloat2"; } function initialPosition() { return "50,50"; } </script> </head> <body> Tab One </body> </html> -
Now create a new file. Save it as tabfloat2.htm and enter the following to the code: <html> <head> <title>Tab 2</title> <script language="JavaScript"> function initialTabs() { return "tabfloat1"; } </script> </head> <body> Tab Two </body> </html> -
Quit and relaunch Dreamweaver, and try it out. Note the position and size of this new floater. Your new pair of floaters probably looks like the ones shown in Figure 7.5. Figure 7.5. A pair of tabbed floaters, with dimensions and position set.  Task 3: Fancy up the layout with images and layers For this task, use floatme.htm, adding items to the <body> content to experiment with floater interface elements. Feel free to use your own images and SWF files in the steps below. You can also download sample files from this book's companion web site: www.newriders.com. -
In the Configuration/Floaters folder, create a new folder called MyImages . Place whatever images you want to work with in this folder; you'll be linking to them there. -
Try inserting a simple table and GIF image, altering the floater file's code like this: <html> <head> <title>Test Floater</title> </head> <body> <table> <tr> <td align="right"> Welcome to <br>my floater! </td> <td align="left"> <img src="MyImages/duck2.gif" width="150" height="157"> </td> </tr> </table> </body> </html> If you use the sample files from the book's web site, use duck2.gifotherwise, any non-animated GIF image will do. Rebuild the floater layout using this image. (As always, you can use Dreamweaver or your text editor to code the fancier layout.) Figure 7.6 shows the test floater with image and text in a table. Figure 7.6. The test floater with a simple layout and image.  If you like, you can experiment putting an animated GIF in the floaterfrom the sample files, smiley.gif is animated. You'll find that the animation doesn't work. (That's probably for the best. What havoc we could wreak with animated GIFs in all of our floating panels!) note Remember, layers-based layouts may not display the same on Mac and Windows platforms. Always check for cross-platform compatibility when designing with layers. -
Floater layouts work in layers as well as tables. To see how this works, redo your layout in layers, including a layer for the image and one for the text, like this: <body> <div id="duckLayer" style="position:absolute; left:25px; top:25px; width:134px; height:110px; z-index:2"> <img src="MyImages/duck2.gif" width="150" height="157"> </div> <div id="textLayer" style="position:absolute; left:182px; top:188px; width:91px; height:73px; z-index:3"> Welcome to my floater! </div> </body> Try out the floater again and to see that everything still works just fine. Task 4: Add a rollover image Now, how about adding a rollover effect to the floater's image? Normally, in creating rollover effects on HTML pages, we would add a link to an image and add one or more event handlers to the <a> tag to create the rollover effect, like this: <a href="#" onMouseOver="document.myImage.src='over.gif'"; onMouseOut="document.myImage.src='normal.gif'" onMouseDown="down.gif"><img src="normal.gif"></a> Unfortunately, links don't work inside extension layouts (dialog boxes, inspectors, floaters). But we can attach event handlers to the <img> tag itself: <img src="normal.gif" onMouseOver="document.myImage.src='over.gif'"; onMouseOut="document.myImage.src='normal.gif'" onMouseDown="down.gif"> We can do this by writing the code ourselves , or we can take advantage of the Dreamweaver Swap Image behavior to do it for us. Figure 7.7 shows various stages in the process of using Dreamweaver to add a rollover to a floater. Refer to it as necessary when performing the following steps. Figure 7.7. Adding a rollover to a floating panel layout. Note that the code is added to the <img> tag, and there is no <a> tag.  -
In your graphics editor, create several images to represent various stages of an image, or use the click.gif, click_over.gif, and click_down.gif sample files from the book's companion web site. Put the image files in the Configuration/ Floaters/MyImages folder. (Figure 7.8 shows the sample GIF images to give you an idea what you're after here.) Figure 7.8. The images to use for the rollover effect. If you're making your own images, you need an up, over, and down state.  -
In Dreamweaver, open floatme.htm. Create a new layer to hold your image, and use the Image object to insert click.gif. Leave the image selected for the next step. -
Open the Behaviors panel. From the popup list of event handlers, choose IE 5 (this browser supports a wide variety of event handlers attached to <img> tags, so choosing it here gives you access to these options). After you do this, take a look at the list of event handlers. It's long! -
From the popup actions list, choose Swap Image. In the dialog box, choose not to Preload the images and not to Restore on mouseOut (you'll see why shortly). For the rollover image, choose click_over.gif or your equivalent image. Click OK to close the dialog box. Dreamweaver may have added a link to your image and attached the function call for the behavior to the <a> tag. If this happened , select the behavior and choose the mouseOver command that isn't in parentheses from the list of choices. This attaches the call to the <img> tag. (Check the code and see!) -
Repeat step 4 until you have these behaviors in place: | Event | Required Actions | | onMouseOver | swapImage to click_over.gif | | onMouseDown | swapImage to click_down.gif | | onMouseUp | swapImage to click_over.gif | | onMouseOut | swapImage to click.gif | All event handlers should appear in the Behaviors panel without parentheses, and should be added to the <img> tag. If Dreamweaver added an <a> tag, you can go to Code view and remove it, if you like. It's useless. If Dreamweaver added the MM_preload function to the document <head> , you can delete that as well. You don't need this function because the images won't ever be downloaded into a browser cache. note You have to tell Dreamweaver not to automatically restore onMouseOut, and do it manually, or all the other stages won't be entered correctly. -
Try it out! The cursor may not change to a pointing finger when it's over the button, but the image should change color when it's rolled over and when the mouse is down on it. Figure 7.9 shows the final effect. Figure 7.9. A very decorative floater, indeed, complete with rollover in action.  note This rollover trick works in any Dreamweaver extension layout, although we generally don't use fancy effects like this in inspectors and dialog boxes. Task 5: Put a SWF (Flash) movie in a floater This task shows a nice simple way to get a flashy (ahem) guided tour, promotional intro, or other special message into Dreamweaver. Use Flash! Create an SWF movie that's not too processor- intensive , and place it in the floater file using the <object> tag. -
Create your own Flash SWF file, or use the workshop.swf file from the book's companion web site. If you create your own file, here are some tips: -
Complex animations don't always play smoothly when placed in floaters, so keep it simple. -
Dreamweaver MX supports Flash MX SWF files. -
Flash interactivity comes through, though maybe a bit sluggishly if your file is complex. -
Wherever you get your SWF file from, put it in Configuration/Floaters/MyImages. -
The simplest procedure is the placement in the Dreamweaver Design view, nice and quick. Open floatme.htm in Dreamweaver and remove all of its contents. Use the Flash object to insert the SWF movie. Some tips on this part of the process: -
If you want the movie to snuggle up against the upper-left corner of the floater, set the borders to "0" by changing the <body> tag or using Modify: Page Properties like this: <body leftmargin="0" topmargin="0"> -
To make the Flash movie resize as the user resizes the floater window, set the width and height of the Flash object to 100%. -
Dreamweaver automatically adds <object> and <embed> tags for the movie. You can remove the <embed> tag if you likeDreamweaver doesn't require it. Figure 7.10 shows the Flash movie being inserted and formatted, using Dreamweaver Design view. Figure 7.10. Adding the workshop.swf Flash movie to a floater file, using Dreamweaver Design view.  -
Try it out! If you used the workshop.swf file, your results will look like Figure 7.11. Figure 7.11. A floater containing a Flash SWF movie  Task 6: Add form elements for interactivity So far, we have looked at the decorative things we can do with floaters. But of course, we can also use floaters as document editing helpers and inspectors. For this practice task, we'll get rid of all the fancy stuff and go back to a simple Dreamweaver-esque interface. We'll create a selection inspector that reports what kind of object the user has selected. -
In your text editor or in Dreamweaver, open floatme.htm (or create a new floater file). -
Enter the following code in the <body> section: <body> <form name="myForm"> <table> <tr valign="baseline"> <td align="right" nowrap>The current selection is:</td> <td align="left"> <input type="text" name="theSelection"> </td> </tr> <tr valign="baseline"> <td> </td> <td align="left"> <input type="button" value="Check Selection"> </td> </tr> </table> </form> </body> Figure 7.12 shows the proposed layout created by this form. Figure 7.12. The selection editor layout, shown in the Dreamweaver Design view, and in its incarnation as a floater.  -
You want to create a function that determines the currently selected object's node, and (if applicable ) its tag name, and reveals that information in the text field. The function should be called using an onClick event handler attached to the Check Selection button. To do this, add the following code to your floater file's <head> section: <head> <title>Test Floater</title> <script language="JavaScript"> function whatAmI() { //access the selected object var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); //determine node type var myType=""; if (myObject.nodeType==Node.TEXT_NODE) { myType="TEXT"; }else if (myObject.nodeType==Node.COMMENT_NODE){ myType="COMMENT"; }else{ myType=myObject.tagName; } //fill in form field document.myForm.theSelection.value=myType; } </script> </head> What's happening here? After gaining access to the selected object, the whatAmI() function creates a variable called myType to hold the information that will eventually be fed into the floater's form field. It then uses a series of conditionals to enter the value TEXT , COMMENT , or a tag name into the variable. And finally, it feeds that variable into the form field. -
Don't forget to call the function after you define it! Add the following event handler and function call to your form's button: <input type="button" value="Check Selection" onClick="whatAmI()" > -
After you're finished, try the floater out and tinker until it's inspecting properly, as shown in Figure 7.13). Remember, you'll need to restart Dreamweaver every time you change the floater file, to make sure Dreamweaver is registering your altered code. Figure 7.13. The Inspect Selection floater at work.  Task 7: Add selectionChanged() so that the form works automatically Now we'll set the floater to continuously report the selection information, not just when the user clicks a button. -
In the <head> section of your floater file, rename the function you just created selectionChanged() . In the <body> section, delete the button. Why are you doing this? The selectionChanged() function is part of the API, and will be called automatically as long as the floater is open. So it no longer needs a form button with event handler and function call to trigger it. -
After you make these changes, try out the floater. Leave the floater open onscreen as you work in a sample document, changing selections and editing code. Figure 7.14 shows this happening. Figure 7.14. The Inspect Selection floater in action, being called automatically as the user works.  The floater should automatically report your selection, but it may lag slightly behind you if you work quickly. Dreamweaver may also be a little more sluggish than you're used to. That's the performance hit. Can you see why you might want to avoid this lag? Task 8: Add the documentEdited() function For this task, we'll experiment with another automatically called function for floaters, documentEdited() . We'll revise the floater so that, in addition to detecting the current selection, it also counts the number of edits the user makes to the current document, and reports them. This is a handy way to tell how often the documentEdited() command is called, and what user actions will trigger it. -
Add the following code to your floater's <body> section (altered code is in bold): <body> <form name="myForm"> <table> <tr valign="baseline"> <td align="right" nowrap>The current selection is:</td> <td align="left"> <input type="text" name="theSelection"> </td> </tr> <tr valign="baseline"> <td align="right">The number of edits:</td> <td align="left"><input name="myEdits" type="text" id="editCount"> </td> </tr> </table> </form> </body> This creates a revised layout like that shown in Figure 7.15. Figure 7.15. The revised layout for the test floater, ready to count edits as well as inspecting user selections.  -
Now add the following code to the floater's <script> tag: var gHowMany = 0; function documentEdited() { gHowMany++; document.myForm.myEdits.value = gHowMany; } What's happening here? The global variable gHowMany is created, to hold the number of edits. The documentEdited() form increments gHowMany and feeds it into the myEdits form field. Each time this function is automatically called, gHowMany will be incremented and the floater's form field updated. -
Launch Dreamweaver and try it out! Work on a sample document with the test floater open onscreen. Keep an eye on what triggers the edit count to increase. The count may lag slightly behind you if you work quickly. Depending on the speed of your computer and the complexity of what you're doing, Dreamweaver may also seem a bit more sluggish than usual.  |
