Making Objects: Practice Session

Start with a little experimenting, just to get your feet wet and make sure your working setup is just the way you like it. (See "Setting Up Shop" in the Introduction for more information.)

Task 1: Create a custom objects category

Before creating custom objects, you want to create a special place to put them. You also want a custom category, or tab, to appear in the Insert bar to hold your objects. This first practice task will set you up to create all the objects in this chapter.

1. Dreamweaver normally configures its interface and extensions when it starts up, so it's standard procedure to quit the program, make any desired configuration changes, and then launch Dreamweaver again (see the sidebar "Reloading Extensions"). Therefore, start your practice task by quitting Dreamweaver if it's running.

2. Find and open the Configuration folder. Then open the Objects folder. (Remember: It is easier to work if you create a shortcut or alias of the Configuration folder and place it where you can easily get at it.)

3. In the Objects folder, create a new folder. Call it Development . It's always a good idea to put your objects-in-progress in one folder until they're complete so that they don't get in your way when you try to get actual work done in Dreamweaver.

4. Now, to make that folder show up as a category in the Insert bar, open the insert-bar.xml file in your text editor. Find the </insertbar> tag at the end of the file and enter this code immediately before it:

    <category id="DW_Insertbar_Development" folder="Development">  </category> 

   Because you added this element below all other categories in the file, you're telling Dreamweaver to add a new tab after all other tabs in the Insert bar. When you've done this, save insertbar.xml and close it.

5. Launch Dreamweaver.

6. Check out the Insert bar. If the panel is in its standard horizontal position, you'll see a new tab called Development. If the panel is in its classic vertical position, click on the popup list of categories to see a new category called Development. (Of course, if you choose that category, it's emptybut not for long!) See Figure 2.4 for a picture of the newly extended Insert bar.

   Figure 2.4. The Insert bar (shown in vertical and horizontal modes), with a new Development category.

   

Reloading Extensions

Dreamweaver checks its configuration files, and configures its extensions, when starting up. This means that, for most extension types, it's safe to edit the extension files when Dreamweaver is running. It also means that whenever you make a change to any configuration file, Dreamweaver will not notice your change until you quit and relaunch.

There is a shortcut, however. A quicker way to update the configuration, without having to quit Dreamweaver, is to Ctrl-click (Windows) or Option-click (Mac) the Insert bar's Options menu iconthe little icon at the upper-right corner of the Insert bar. Clicking this icon normally shows the panel's Options menu. Ctrl-clicking (Opt-clicking) shows the Options menu with a Reload Extensions command showing at the bottom. Choosing this command forces Dreamweaver to reload its configuration files without quitting and relaunching. Figure 2.5 shows this happening.

Figure 2.5. Ctrl-clicking (Opt-clicking) to access the Reload Extensions command in the Insert bar's options menu.

If you're working in the classic workspace, with the Insert bar in its vertical arrangement, Ctrl-click (Opt-click) the category name at the top of the panel to access the list of other categories. The Reload Extensions command will appear at the bottom of this menu.

Note that there are a few kinds of configuration changes that won't be updated using this shortcut method: Adding new categories to the Insert bar, adding new behaviors, changing Property inspectors and floaters , and some other changes will not be reloaded unless the program is actually quit and relaunched. (These special cases will be noted in the appropriate chapters throughout the book.)

Task 2 : Create a basic object file

The best way to see how objects work is to create one and try it out.

1. Launch your text editor of choice, or bring Dreamweaver to the front in Code view if you plan to write your extensions there.

2. Create a new file. Save it in your new Configuration/Objects/Development folder. Call it My Object.htm .

3. Type in the basic code for a simple object, as shown in Listing 2.1. Okay, it's not a very exciting object, but it has all the required elements: The title will become the ToolTip, the function will insert the code, and all will be right with the world.

4. Save your file and close it.

5. That creates your object. To add the object to the Insert bar, open insertbar.xml. Add the following lines to your Development <category> tag (new code is in bold):

    <category id="DW_Insertbar_Development" folder="Development">  <button id="DW_Development_MyObject"   image=""   enabled=""   showIf=""   file="Development\My Object.htm" />  </category> 

6. If Dreamweaver isn't running, launch it. If Dreamweaver is running, you could quit and relaunch to make it notice your new object. But try the shortcut method for reloading extensions (see the sidebar on "Reloading Extensions"). In the Insert bar, Ctrl-click (Windows) or Opt-click (Mac) the icon for the panel's popup options menu. When the menu appears, choose Reload Extensions.

7. In the Insert bar, find your Development tab and bring it to the front. There's your new object, represented by a text button (see Figure 2.6). Congratulations!

   Figure 2.6. The Insert bar, showing the brand-new My Object object in the Development tab.

   

8. Try out the ToolTip. Let your cursor hover over the object. The ToolTip says My Simple Object (the same as your object file's <title> ).

9. Try out the Insert menu entry. Somewhere near the bottom of the menu, you should find My Object (the same as your object's filename, minus its extension).

   note

   If you haven't used the Extension Manager to add any custom extensions, your new object probably appears at the very bottom of the Insert menu. If you have a lot of custom extensions, you probably have a very long Insert menu; your new object will appear somewhere in there.

10. Try out your object. Choose it from the Insert bar or the Insert menu. It should insert the text This is my simple object. into your document. There you go!

note

Troubleshooting

What if your object doesn't work? If the object doesn't appear in the Insert bar, check insertbar.xml to make sure you don't have any typos in your entry; check the Configuration folder to make sure your object file is in the right place, and has the .htm or .html filename extension. If you get an error message when you click the object, or if you get an error message when you reload extensions, it means there's a syntax error in your objectTag() function, probably just a typo. Check your code against the code in Listing 2.1.

Task 3: Add a simple form

Now, see how HTML forms are used to create dialog boxes in objects. You won't do any fancy coding here; you are just trying out the <form> tag. You also see how object code can easily include HTML tags as well as text.

1. Back in your text editor, open My Object.htm again.

2. Revise the <head> section of the file to look like this (new code is in bold):

    <head>  <title>My  Fancy  Object</title>  <script language="JavaScript">  function objectTag() {       return "  <h1>  My  fancy  object inserted this text  </h1>  ";  }  </script>  </head> 

3. Revise the <body> section of the file to look like this (new code is in bold):

    <body>  <form name="myForm">   This is the dialog box for my very first object.   </form>  </body> 

4. Save the file and close it. Then go back to Dreamweaver and reload extensions. (Quit and relaunch the program, or Ctrl-click/Opt-click on the Insert bar's Options menu icon and choose Reload Extensions from the menu.)

5. Open a new document and try out your object. Choosing the object in the Insert bar opens a dialog box that looks something like the one in Figure 2.7. Ugly, but functional. And see how the OK and Cancel buttons were added for you? Click OK, and your newly formatted <h1> statement should be inserted into your document. (If you want to see exactly how the code is getting inserted, try switching to Code view and inserting the object. The code in your objectTag() function's return statement is inserted into the code of your document.)

   Figure 2.7. A basic dialog box for My Object.

   

6. Go back to your text editor and open the object file again. You can make a more attractive dialog box by putting a very simple table in your form. Change the form code to look like this (new code is in bold):

    <form name="myForm">  <table border="0">   <tr>   <td nowrap>  This is the form for my very first object.  </td>   </tr>   </table>  </form> 

   When you're done, save the object file and close it, and then return to Dreamweaver.

7. Back in Dreamweaver, reload extensions and try the object again. Your dialog box is much nicer lookinglike the one shown in Figure 2.8. Macromedia recommends that you put your forms into tables like this to create attractive dialog boxes. Notice also that the dialog box has been automatically sized to fit your form's content, even if you didn't specify a width for the table. (For more information on user interface issues, see Appendix B.)

   Figure 2.8. An improved dialog box for My Object.

   

8. When the file is working properly, save a copy of it somewhere outside the Dreamweaver Configuration folder for future use. A working object file makes a great template for building future objects (such as the ones you will do next ). If you followed the setup instructions in the Introduction chapter (see the section on "Setting up Files and Folders"), you have a Working folder somewhere on your computer for just this purpose. You might also take a minute to comment the code for future reference. Listing 2.3 shows how your final, commented code might look.

Listing 2.3 Final Code from the Object-Making Practice Session, with Comments for Reference

 <html>  <head>  <!the title will become the ToolTip>  <title>My Fancy Object</title>  <script language="JavaScript">  //this function is called automatically  function objectTag() {  //this code will be inserted  return "<h1>My fancy object inserted this text</h1>";  }  </script>  </head>  <body>  <!presence of a form tag tells Dreamweaver to display a dialog box>  <form name="myForm">  <table border="0">        <tr>            <td nowrap>                    This is the form for my very first object.            </td>        </tr>  </table>  </form>  </body>  </html>