| In the previous chapter, we looked at the many behaviors Dreamweaver includes to facilitate interactivity between your web pages and your users. While we reviewed numerous behaviors that made up different types of functionality depending on what we were working with, there were three behaviors we didn't get a chance to cover because they dealt with a topic we hadn't reviewed up to that point. The three behaviors included the Set Text of Layer, Drag Layer, and Show-Hide Layer behaviors. Now that you've had the chance to review and work with layers, the many properties that are exposed by layers, and how to build a simple website using layers, let's add a twist by introducing how Dreamweaver makes it possible for you to work with behaviors and layers together to enhance the user experience. Using the Set Text of Layer Behavior In the previous chapter, we looked at the Set Text of Status Bar and the Set Text of Text Field behaviors, which allow you to dynamically set the text value for either the browser's status bar or a text field when you click a button on the page. The same functionality can be applied to layers using the Set Text of Layer behavior. To use this behavior, follow these instructions: 1. | Create a new HTML page by choosing the New option from the File menu. When the New Document dialog appears, select the HTML option from the Basic Page category and click Create.
| 2. | Insert a new Button form object by clicking the Button icon from the Forms category in the Insert bar. When the button has been added to the page, select it and change the Action to None in the Properties Inspector. This setting prevents the button from trying to submit or reset the non-existent form.
| 3. | Change the Button's text Label to read Add Text to Layer.
| 4. | Draw a new layer on the page by switching to the Layout category in the Insert bar, clicking the Draw Layer icon, and drawing the layer on the page, preferably below the Add Text to layer button.
| 5. | Select the Button object and choose the Set Text of Layer option from the Set Text submenu in the Add (+) menu. The Set Text of Layer dialog appears.
| 6. | Because we have only one layer on the page, the layer Layer1 is the only selectable option in the Layer drop-down menu. If we had other layers in the page, we'd be able to select them from this menu as well. Now type some text in the New HTML text box. I'll enter the text Hello World and click OK.
| 7. | Make sure that the event associated with the Button is onClick. If it's not, use the menu that appears when you click to the right of the event in the Behaviors panel to change it so that it uses the onClick event.
|
To test the result, save your work and preview the page in the browser. When you click the Add Text to Layer button, the text Hello World will appear just below the text box (in the layer). Using the Drag Layer Behavior Another interesting and feature-rich behavior is the Drag Layer behavior. You can use this behavior to create drag-and-drop functionality on your page. Maybe you're developing a children's web-based tutorial where feedback is given when the child drags an object onto or within the space of another object. If that's the case, this behavior is perfect. To use the Drag Layer behavior, follow these steps: 1. | In this example, use the layer that already exists on the page. Drag a headshot image from the Images folder into the layer. I'll drag the head_adatheadminassistant.gif file into the layer.
| 2. | Select the image and choose the Drag Layer behavior from the Add (+) menu in the Behaviors panel. The Drag Layer dialog appears.
| 3. | While I'll certainly provide a detailed description of the options in this dialog, for now, simply click OK.
| 4. | Make sure that the event associated with this behavior is onMouseDown. This event allows the user to drag the image contained in the layer while the user's mouse is down on the image.
|
Now save your work and test the results in the browser by choosing the Preview in Browser option (or by pressing F12). You'll notice that if you click, hold, and drag the image, you can position the layer anywhere you want on the page. Although the ability to reposition a layer is core to the Drag Layer behavior, other options exist in the Drag Layer dialog for extending the functionality exposed by the behavior. To review these options, right-click the behavior in the Behaviors panel and choose the Edit Behavior option from the context menu to reopen the Drag Layer dialog (you could also double-click the behavior to edit it). When the dialog opens, notice the following functionality in the Basic tab: Layer: Assuming you have multiple layers in the page, select the specific layer to drag from this menu. Movement: Select an option from this menu to either constrain or unconstrain the layer's movement as it's being dragged. Choose Unconstrained movement when working with online puzzles and other drag-and-drop games. Choose the Constrained option when working with controls such as sliders. Drop target: The drop target is the x and y coordinate of the spot to which you want the visitor to drag the layer. Click the Get Current Position button to automatically fill in the Left and Top coordinate values based on the current position of the layer. Snap if within: Assuming you're working with a drop target, enter a pixel value in this text box to have Dreamweaver automatically snap the layer and its contents to the drop target when the layer is within the specified number of pixels.
Switch to the Advanced tab of the Drag Layer dialog to see the following functionality: Drag handle: By default, Dreamweaver allows you to click, hold, and drag within any part of the layer to drag it. If you want to constrain the drag to a specific portion of the layer, choose the Area Within Layer option and fill in the coordinates for left, top, width, and height. This option is particularly useful when a portion of the layer suggests dragging, such as a title bar. While dragging: Enable this check box to leave the layer on top of other layers while it's being dragged. You might also choose the Restore Z-index option if you want to keep the layer on top of other layers while it's being dragged but restore it to a lower z-index once it's been dropped. You can also enter JavaScript code within the Call JavaScript text box that will be executed while the layer is being dragged. When dropped: Enter custom JavaScript code within this text box and choose the Only If Snapped check box to execute JavaScript code when the user drops the layer on a specific target. This option is particularly useful when you want to provide a pop-up feedback message confirming that the user got the right answer when they dropped the layer in the correct target.
Using the Show-Hide Layers Behavior The last behavior associated with layers is the Show-Hide Layers behavior. Similar to the functionality exposed by the Shop Pop-Up Menu behavior, the Show-Hide Layers behavior can be used to show or hide the contents in a layer when an element on the page is selected, unselected, rolled over, rolled out, and so on. To use this behavior, follow these instructions: 1. | Place your cursor just to the right of the Add Text to Layer button and insert two new Button form objects by clicking the Button icon in the Forms category in the Insert bar twice.
| 2. | Change the Action for both form objects to None to prevent the buttons from submitting or resetting.
| 3. | Change one button's text Label to read Show and the other button's text label to read Hide.
| 4. | Choose the Draw Layer option from the Layout category in the Insert bar and draw a new layer on the page, preferably to the right of the two new buttons.
| 5. | Drag a new headshot image within the new layer. I'll drag the head_agnestheaccountant.gif image into the layer.
| 6. | Select the Show button and choose the Show-Hide Layers behavior from the Add (+) menu in the Behaviors panel. The Show-Hide Layers dialog appears.
| 7. | As you can see from the dialog, the Named Layers list box displays the layers on the page. Select the Layer2 option and click the Show button. Click OK.
| 8. | Repeat steps 6 and 7 for the Hide button: Select the Hide button, choose the Show-Hide Layers behavior from the Add (+) menu in the Behaviors panel, select the Layer2 option, and click the Hide button. Click OK.
| 9. | Select the layer that will be shown and hidden and change the default Visibility property to Hidden in the Properties Inspector. This setting ensures that the layer is hidden when the page is loaded.
|
Save your work and test the results in the browser by choosing the Preview in Browser option (or by pressing F12). You'll notice that you can click the Show and Hide buttons to either show or hide the layer on the page. |
