Create a Spry data set



    Create a Spry HTML data set

    1. If you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and also inserting a layout, make sure that the insertion point is where you want to insert the layout on the page.

    2. Choose Insert > Spry > Spry Data Set.

    3. In the Specify Data Source screen, do the following:

      • Select HTML from the Select Data Type pop-up menu. (It’s selected by default.)

      • Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name can contain letters, numbers, and underscores, but cannot start with a number.

      • Specify the HTML elements in your data source that you want Dreamweaver to detect. For example, if you’ve organized your data inside a div tag, and you want Dreamweaver to detect div tags instead of tables, select Divs from the Detect pop-up menu. The Custom option lets you type any tag name that you want to detect.

      • Specify the path to the file that contains your HTML data source. The path can be a relative path to a local file in your site (for example, data/html_data.html), or an absolute URL to a live web page (using HTTP or HTTPS). You can click the Browse button to navigate to a local file and select it.

        Dreamweaver renders the HTML data source in the Data Selection window, and displays visual markers for the elements that are eligible as containers for the data set. The element you want to use must already have a unique ID assigned to it. If it doesn’t, Dreamweaver will display an error message, and you’ll need to go back to the data source file and assign a unique ID. Additionally, eligible elements in the data source file cannot reside in Spry regions, or contain other data references.

        Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.

      • Select the element for your data container by clicking one of the yellow arrows that appears in the Data Selection window, or by choosing an ID from the Data Containers pop-up menu.

        Selecting the element for the HTML data set data container.

        For lengthy files, you can click the Expand/Collapse arrow at the bottom of the Data Selection window to see more of the data.

        Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the Data Preview window.

      • (Optional) Select Advanced Data Selection if you want to specify CSS data selectors for the data set. For example, if you specified .product in the Row Selectors text box, and .boximage in the Column Selectors text box, the data set would include only those rows with the .product class assigned to them, and only those columns with the .boximage class assigned to them.

        If you want to type more than one selector in a given text box, separate the selectors with a comma.

        For more information, see About Spry data selectors.

      • When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to go on to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).

    4. In the Set Data Options screen, do the following:

      • (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.

        You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or by navigating to it using the left and right arrows in the upper-left corner of the screen.

      • (Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Columns pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.

      • (Optional: tables only) Deselect Use First Row as Header if you want to use generic column names (that is column0, column1, column 2, and so on) instead of the column names specified in your HTML data source.
        Note: If you’ve selected something other than a table for the container element of your data set, this option and the next option are not available. Dreamweaver automatically uses column0, column1, column2, and so on, for the column names of non-table-based data sets.

      • (Optional: tables only) Select Use Columns as Rows to reverse the horizontal and vertical orientation of the data in the data set. If you select this option, columns will be used as rows.

      • (Optional) Select Filter out Duplicate rows to exclude duplicate rows of data from the data set.

      • (Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If you want data to autorefresh, select Autorefresh Data and specify a refresh time in milliseconds.

      • When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on to the Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).

    5. In the Choose Insert Options screen, do one of the following:

      • Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layout for the data set.

      • Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to the page.

    6. Click Done.

      Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the SpryData.js file and the SpryHTMLDataSet.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not function. When you upload your page to a server, you’ll also need to upload these files as dependent files

    Create a Spry XML data set

    1. If you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and also inserting a layout, make sure that the insertion point is where you want to insert the layout on the page.

    2. Choose Insert > Spry > Spry Data Set.

    3. In the Specify Data Source screen, do the following:

      • Select XML from the Select Data Type pop-up menu.

      • Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name can contain letters, numbers, and underscores, but cannot start with a number.

      • Specify the path to the file that contains your XML data source. The path can be a relative path to a local file in your site (for example, datafiles/data.xml), or an absolute URL to a page on the web (using HTTP or HTTPS). You can click the Browse button to navigate to a local file and select it.

        Dreamweaver renders the XML data source in the Row Elements window, displaying the XML tree of data elements available for selection. Repeating elements are marked with a plus (+) sign, and child elements are indented.

        Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.

      • Select the element that contains the data you want to display. Typically this element is a repeating element, such as <menu_item>, with several children elements, such as <item>, <link>, <description>, and so on.

        Selecting a repeating element for the XML data set.

        Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the Data Preview window. The XPath text box displays an expression that shows where the selected node is located in the XML source file.

        Note: XPath (XML Path Language) is a syntax for addressing portions of an XML document. It is used mostly as a query language for XML data, just as the SQL language is used to query databases. For more information on XPath, see the XPath language specification on the W3C website at www.w3.org/TR/xpath.

      • When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to go on to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).

    4. In the Set Data Options screen, do the following:

      • (Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For example, if a column in the data set contains numbers, select the column and choose number from the Type pop-up menu. This option is only important if you want your user to be able to sort the data by that column.

        You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or by navigating to it using the left and right arrows in the upper-left corner of the screen.

      • (Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.

      • (Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set.

      • (Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If you want to autorefresh data, select Autorefresh Data and specify a refresh time in milliseconds.

      • When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on to the Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).

    5. In the Choose Insert Options screen, do one of the following:

      • Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layout for the data set.

      • Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to the page.

    6. Click Done.

      Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the xpath.js file and the SpryData.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not function. When you upload your page to a server, you’ll also need to upload these files as dependent files.

    Choose a layout for the data set

    The Choose Insert Options screen lets you select different display options for how you want to display values from the data set on the page. You can display data using a dynamic Spry Table, a master/detail layout, a stacked containers (single column) layout, or a stacked containers with spotlight area (two-column) layout. A thumbnail depiction of what each layout looks like appears in the Choose Insert Options screen.

    Dynamic Table layout

    Select this option if you want to display your data in a dynamic Spry Table. Spry Tables allow for dynamic column sorting and other interactive behaviors.

    Once you’ve selected this option, click the Set Up button to open the Insert Table dialog box and follow these steps:

    1. In the Columns panel, adjust the columns for your table by doing the following:

      • Select a column name and click the minus (-) sign to delete the column from the table. Click the plus (+) sign and select a column name to add new columns to the table.

      • Select a column name and click the up or down arrows to move the column. Moving a column up moves it further left in the displayed table; moving a column down moves it to the right.

    2. To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is Clicked. By default, all columns are sortable.

      If you want to make a column unsortable, select its column name in the Columns panel, and deselect Sort Column When Header Is Clicked.

    3. If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in your HTML page, you can apply a CSS class for one or more of the following options:

      Odd Row Class
      Changes the appearance of the odd-numbered rows in the dynamic table according to the selected class style.

      Even Row Class
      Changes the appearance of the even-numbered rows in the dynamic table according to the selected class style.

      Hover Class
      Changes the appearance of a table row when you move the mouse over it according to the selected class style.

      Select Class
      Changes the appearance of a table row when you click it according to the selected class style.

      Note: The order of the odd, even, hover, and select classes in your style sheet is very important. The rules should be in the exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear above the even and odd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the CSS panel to order them correctly, or you can manipulate the CSS code directly.

    4. If the table you are creating is going to become a dynamic Spry master table, select Update Detail Region When Row Is Clicked. For more information, see About dynamic Spry master tables and updating detail regions.

    5. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

      If you’re in Design view you’ll see the table appear with a row of headers and a row of data references. The data references are highlighted and enclosed in curly brackets ({}).

    Master/Detail layout

    Select this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an item in the master (left) region that updates the information in the detail (right) region. Typically the master region contains a long list of names, for example a list of available products. When the user clicks one of the product names, the detail region displays much more detailed information about the selection.

    Once you’ve selected this option, click the Set Up button to open the Insert Master/Detail Layout dialog box and follow these steps:

    1. In the Master Columns panel, adjust the content of your master region by doing the following:

      • Select a column name and click the minus (-) sign to delete the column from the master region. Click the plus (+) sign and select a column name to add new columns to the master region. By default Dreamweaver populates the master region with data from the first column in the data set.

      • Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Master Columns panel sets the order of the data’s appearance in the master region on the page.

    2. Repeat the above steps for the Detail Columns panel. By default Dreamweaver populates the detail region with all of the data that is not in the master region (that is, all columns except for the first column in the data set).

    3. (Optional) Set different container types for data in the detail region. To do so, select the name of a detail column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.

    4. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

      If you’re in Design view you’ll see the master/detail regions appear, populated with your selected data references. The data references are highlighted and enclosed in curly brackets ({}).

    Stacked Containers layout

    Select this option if you want to display your data using a repeating container structure on the page. For example, if you have four columns of data in the data set, each container can include all four columns, and the container structure will repeat itself for each row in the data set.

    Once you’ve selected this option, click the Set Up button to open the Insert Stacked Containers dialog box and follow these steps:

    1. In the Columns panel, adjust the content of your stacked containers by doing the following:

      • Select a column name and click the minus (-) sign to delete the column from the stacked containers. Click the plus (+) sign and select a column name to add new columns to the containers. By default Dreamweaver populates the stacked containers with data from every column in the data set.

      • Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Columns panel sets the order of the data’s appearance in the stacked containers on the page.

    2. (Optional) Set different container types for data in the stacked container. To do so, select the name of a data set column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.

    3. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

      If you’re in Design view you’ll see the container, populated with your selected data references. The data references are highlighted and enclosed in curly brackets ({}).

    Stacked Containers with Spotlight Area layout

    Select this option if you want to display your data using a repeating container structure on the page with a spotlight area in each container. Typically, the spotlight area contains a picture. The Spotlight Area layout is similar to the Stacked Containers layout, the difference being that in the Spotlight Area layout, the data display is divided into two separate columns (within the same container).

    Once you’ve selected this option, click the Set Up button to open the Insert Spoltlight Area Layout dialog box and follow these steps:

    1. In the Spotlight Columns panel, adjust the content of your spotlight area by doing the following:

      • Select a column name and click the minus (-) sign to delete the column from the spotlight area. Click the plus (+) sign and select a column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area with data from the first column in the data set.

      • Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Spotlight Columns panel sets the order of the data’s appearance in the spotlight area on the page.

    2. (Optional) Set different container types for data in the spotlight area. To do so, select the name of a data set column, and select the container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.

    3. Repeat the above steps for the Stacked Columns panel. By default Dreamweaver populates the stacked columns with all of the data that is not in the spotlight area (that is, all columns except for the first column in the data set).

    4. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.

      If you’re in Design view you’ll see the spotlight area with stacked containers alongside of it, populated with your selected data references. The data references are highlighted and enclosed in curly brackets ({}).

    Do Not Insert HTML

    Select this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of the data set to the page.

    Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time. To do so, double-click the name of the data set in the Bindings panel, click through to the Choose Insert Options screen, select your layout, and click Done.
    Note: You can also drag the name of the data set from the Bindings panel to the insertion point on the page. When you do so, the Choose Insert Options screen opens. Make your layout selection and click Done.

    Edit a data set

    After you create a Spry data set, you can edit it at any time.

     In the Bindings panel (Window > Bindings), double-click the name of your data set, and make your edits.

    Note: When you edit a data set, and select a new layout in the Choose Insert Options screen, Dreamweaver does not replace whatever layout is on the page, but rather inserts a new one.

    Use a design-time feed

    If you are working with data that is still being developed, you may find it useful to use a design-time feed. For example, if the server developer is still finalizing the database behind your XML data file, you can use a test version of the file to design your page separately from the database development.

    When you use a design-time feed, Dreamweaver only populates your work environment with data from that feed. References to the data source that exist in the page code remain references to the real data source you want to use.

    1. Begin creating a Spry Data Set (see previous procedures for instructions).

    2. In the Specify a Data Source screen, click the Design-time feed link.

    3. Click the Browse button to locate the design-time feed and click OK.

    About Spry data selectors

    When you use Dreamweaver to create a Spry data set, Dreamweaver includes all of the data in a selected container by default. You can refine this selection by using CSS data selectors. CSS data selectors let you include only a portion of the data from the data source by allowing you to specify CSS rules that are attached to certain pieces of data. For example, if you specify .product in the Row Selectors text box of the Specify Data Source screen, Dreamweaver creates a data set that only contains rows with the .product class assigned to them.

    You must select the Advance Data Selection option in the Specify Data Source screen for the data selectors boxes to become active. If you enter data selectors and deselect the option, Dreamweaver retains what you typed in the boxes, but does not use them as filters for the data set.

    About dynamic Spry master tables and updating detail regions

    One of the most common uses of Spry data sets is to create one or more HTML tables that dynamically update other page data in response to a user action. For example, if a user selects a product from a list of products in a table, the data set can immediately update data elsewhere on the page with detailed information about the selected product. With Spry, these updates do not require a page refresh.

    These separate page regions are referred to as master and detail regions. Typically, one area on the page (the master region) displays a list of categorized items (for example, a list of products), and another area of the page (the detail region) displays more information about a selected record.

    Each data set maintains the notion of a current row, and by default, the current row is set to the first row of data in the data set. When a user makes different selections in a master region (again, taking the example of a list of different products), Spry actually changes the data set’s current row. Because the detail region is dependent on the master region, any changes that occur from user interaction with the master region (for example, selecting different products), result in changes to the data displayed in the detail region.

    Dreamweaver creates master/detail layouts for you automatically, so that all of the correct associations between master and detail regions are in place. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later. When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a spry:setrow tag inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting the current row of the data set as the user interacts with the table.

    For more information on creating master/detail regions by hand, see the Spry Developer Guide at www.adobe.com/go/learn_dw_sdg_masterdetail_en.