Advanced: Editing the Field with the Property Inspector

Introduction

In this chapter we're going to edit the properties of the FolderView listing using the property inspector of Dreamweaver. Click on  in your design view to display the properties of the listing. Below is a screenshot of the property inspector.

We'll create the following FolderView:

The Property Inspector

1. Setting Bullet option
   Bullet sets the image that is used in front of your expandable root folders. You can set it to none, plus/minus or down/right arrow. We'll leave this option to plus/minus.
   
   
   
   
2. Configuring the Clickable area
   This option lets you configure what part of your list is clickable. You can set it to Row or Bullet Images. We'll set it to Row, when you test in your clickable area has increased to the entire row.
   
   
   
   
3. Identifying your FolderView
   ID is used to identify the field, make sure it is unique for every field you use, we'll set it to ListingOne so we can identify it later.
   
   
   
   
4. Creating structure
   When enabled Show Structure shows the structure of the folders by using lines in front of them, if you disable this option, it only show the structure with indents. We leave the Show Structure option enabled.
   
   
   
   
5. Enabling and Disabling Folder Options
   The Icons option removes your folder images, we'll leave it checked.
   
   
   
   


6. Animation Speed
   Speed sets the expand and collapse speed of your folders. We set the Speed to normal.
   
   
   
   
7. Configuring Effects
   When enabled, the Slide option adds an animated slide effect to the expanding and collapsing of your folders.  Leave it enabled as it gives a nice touch to your folders.
   
   
   
   The Fade option makes your icons transparent when you collapse them and makes them fade in again when you expand your folders. We enable the Fade option for a stylish effect. Make sure you've enabled the Slide option before enabling this option.
   
   
   
   
   

1. Setting the Style Options
   Background color lets you change the color of your canvas. The Choose Other Icons options let's you choose different styles. We leave it at white.
   
   
   
   Select the Choose style template button.
   
    
   
   A popup appears, we'll select the Blue_Folder3_24x24 style.
   
   
   
   The Assets manager appears, select Upload All  to upload the files to your server.
   
    
   
    
   
   
2. Viewing options
   Lets take a look at the Folder and List options in the Property Inspector.
   
   At the Folder field you have to direct the extension towards a system of folders and files which will be used and displayed in our folder view.
   Then you can select what you want your user to see from the List dropdown menu.
   
   If you want your user to view only folders, you select the "Folders" option. Keep in mind that if you select any of these filters and do not have the corresponding types uploaded to your site, the folder view will not display anything.
   
   
3. Request Arguments
   
   Request Arguments: here you can enter parameters which will be added automatically to every Ajax request that Folder View makes. This has no relation to Folder View but you can add them in case your system requires it. For example, this would be required in a site where a username and password have to be entered.

8. Press F12 to preview and save.  That's it you've created your own FolderView!
   The result should be similar to the image below: