Creating Your Own Insert Bar Objects

 < Day Day Up > 



You can work more efficiently in Dreamweaver by creating your own custom objects (tools) for Dreamweaver's Insert bar. Objects are designed to insert a specific string of code into a user's document. Objects appear in one of the tabbed panels of the Insert bar (and in the Insert menu) when the object's file is stored in a subfolder within the Configuration\Objects folder. In most cases, if you add a new object to the Insert bar, you must add a new subfolder for it within the Configuration\Objects folder and also edit the insertbar.xml file. With simple objects, you place the files associated with the object into any of the existing directories within the Objects folder.

About objects

All objects are HTML files. In more complex objects, the <body> of its file can contain an HTML form that accepts parameters for the object (the number of rows and columns to insert in a table). In many cases, the <head> of the object's file contains JavaScript functions that process form input from the <body> and control what is added to the user's document. In some cases, a link to an external JavaScript file also adds to how the parameters for an object are handled. As a result, complex objects that allow the user to modify object parameters may have three related components:

  • The object file that defines what is inserted in your document

  • An 18 × 18 pixel image that appears on the Insert bar

  • The insertbar.xml file that defines where the object appears on the Insert bar

But the simplest objects contain only HTML to insert, without a <body> and <head> tag, and you really don't need to be a JavaScript whiz to build one for yourself.

Building the Table object

A simple object is an HTML file without <head> or <body> tags. To build a custom table object, you would first build a regular HTML page, add the table desired, and then remove the disallowed code or copy the desired code and create a new text page with it. In the exercise that follows, you use a table premade for you. Be sure that you've defined a Chapter 43 site and have added the CD exercise files for Chapter 43:

  1. In the Site panel, open the Objects folder. Open  sidebar_table.htm. Place your cursor into the table and select the table tag using the Tag selector. This 100 percent wide table has 1 row, 2 columns with a padding of 5 pixels, no spacing, and no border. The first column is set to 200 pixels wide and uses a background color in the cell. The second column is set to 100 percent wide because this is a hybrid table.

    Cross-Reference 

    For more detail about hybrid tables, see Chapter 34.

    Inside the table, there are two placeholder images. The first holds open the fixed-width column against the push of the 100 percent value of the second column. Regular spacer GIFs are not used because a relative path to the actual image cannot be made for Dreamweaver objects; therefore, a placeholder is used. Note that the Alt text for each placeholder gives the user directions to replace the image. When the sidebar_table becomes a sidebar_table object and is used to insert this table into a page, the image could be selected and edited using the Fireworks Edit button.

    start sidebar
    Where to Find Your User Data Files

    When customizing your Dreamweaver application on a multi-user system, you'll need to know where to look for files that Dreamweaver created when it was installed. This is where you'll save any files you modify or add while extending — or customizing — your Dreamweaver.

    In older operating systems like Windows 98, Windows ME, and Mac OS9x, a single set of Dreamweaver Configuration files is shared by all users, even if the operating system is configured to support multiple users. For newer systems, like Windows NT, 2000, XP, or Mac OSX, a separate set of user files is created as follows:

    • Windows NT: C:\WinNT\profiles\username\Application Data\Macromedia\ Dreamweaver MX\Configuration

    • Windows 2000 and XP: C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX\Configuration

    • Mac OS X: Hard Disk/Users/username/Library/Application Support/ Macromedia/Dreamweaver MX/Configuration

    In some instances (Windows XP) the files may be hidden. To change the hidden state of the user files, do a search on your system that includes hidden files and folders. Search for the appropriate Application Data (or Library) file and right-click the folder (in the search results) to choose Properties or select it and press Command+I to get info.

    end sidebar

  2. In Design view, select all by either choosing Edit ® Select All or select the <table> tag.

  3. Click to Code view. Your selection is still selected. Copy. Now select all again. You want all the head and HTML code to be gone, then press and delete.

  4. Now paste the code back into the page. Switch back to Design view and choose File ® Save As.

    Now comes the tricky part — getting this file into the correct location.

  5. Navigate to the Objects folder within your username Configuration folder (be sure to read the sidebar about multi-user systems) and create a new folder called Custom_Tables. Save sidebar_tables.htm into the new Custom_Tables folder.

  6. From your desktop, locate your Chapter 43 site folder. Open it and Alt+drag (Option+drag) a copy of the  sidebar_table.gif file to the desktop. Take that copy and place it into the same folder (Custom_Tables) as the  sidebar_table.htm file you saved in the previous step.

The idea is to have the file and the gif in the same folder. Because both share the same name, they have an association, but that alone would be enough to make Dreamweaver pay attention to the new file — if you had placed both files into an existing folder in the main program (applications) Configuration folder of Dreamweaver MX. To use an example for Windows XP, if you had placed both files into Program Files\Macromedia\Dreamweaver MX\Configuration \Objects\Tables, Dreamweaver would add them to the existing Tables Insert bar panel.

Caution 

When adding custom objects to existing Objects folders, take extreme care not to overwrite existing files by using the same filenames.

But, because you added the files to a custom folder to create a new panel (tab) for the Insert bar, you must make one more modification to get Dreamweaver to pay attention and create the new Insert bar panel.

Modifying the Insert Bar XML file

To tell Dreamweaver about the Insert bar panel you want to create, you must modify the insertbar.xml file found in the username's Objects folder. A backup of the file exists (insertbar.xbk) but it is always safer to make a copy on your desktop before you begin any modifications to the main insertbar.xml file, because changes to the file may have been made by installing new extensions.

  1. From your desktop, locate your username Configuration\Objects folder. In it, find insertbar.xml. Make a copy on your desktop. Alt+dragging (Option+dragging) is a great way to do this or Windows users can use the right-click copy/paste method.

  2. In Dreamweaver MX, choose File ® Open and navigate to your username Objects folder and open insertbar.xml.

    The code (XML) contained within insertbar.xml controls how Dreamweaver builds the Insert bar. For each panel, there is a <category></category> pair of tags. Between the tags, information about the HTML file and associated GIF file is provided for Dreamweaver on start up. The code shown here builds the Script panel in the Insert bar.

    <category folder="Script" > <button enabled="" file="Script\Script.htm"   image="Script\Script.gif" name="Script" showIf="" /> <button codeOnly="TRUE" enabled=""   image="Script\Noscript.gif" name="noscript" showIf="" tag="noscript"  /> <button enabled="" file="Script\SSI.htm"   image="Script\SSI.gif" showIf="" /> </category>

    Your goal is to build your own category for Custom_Tables. You won't need as much code as this, though.

  3. Scroll to the ending </insertbar> tag. Place your cursor in front of it and type the following code, being sure to put all the code between brackets on one line, even though you won't see it like that here:

    <category folder="Custom_Tables" > <button file="sidebar_table.htm"   image="sidebar_table.gif" /> </category>

    Because you are putting this last, your new panel would be last in the Insert bar. If you move the code to just after the existing Tables category code, then your new panel's tab would appear just after the Tables tab.

  4. Save the page and close it. To see your new Insert bar panel, you must either reload extensions or restart Dreamweaver. In Figure 43-4, you can see the new Custom Tables tab just after the Tables tab.

    click to expand
    Figure 43-4: Your new set of table tools

Tip 

To reload extensions, press the Control key (Options key for Mac) and click the Insert bar's panel options and select Reload Extensions.

To add more custom tables, simply build the HTML file with the table, modify it as shown in the exercise, and save it as described. Use Fireworks MX (or any other graphics program) to create an 18 × 18 GIF icon with a matching name and save it into Custom_Tables. Then modify the Custom_Tables category in the insertbar.xml file by copying the existing sidebar_table code, pasting, and changing the reference to sidebar table as needed.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net