Connect Datasets

In this lesson I’ll show you how you can get data from xml file and divide them under two spry elements. Depending on what is selected in the first element (Spry table), data is also shown in the second element (Spry Collapsible panel).
Which elements you use, does not matter, this is only a preview.

I have added a number of internal CSS styles.
And there is a new tag added to the xml file, the “description” tag.

 

First open your course page where you want to place the two spry elements.
Select the “Spry” tab on the “Insert” toolbar and click the “Spry XML Data Set.”
In the dialog that appears in the upper section, you give a name for the dataset.
Click the “Browse” button, and select the xml file which serves as a source.
Click the “Get Schema” button.
Important: Do not forget to adjust the data type for our picture, the image tag.
So far everything is still the same as in the previous lesson, so this should be no problem.
Click the OK button.

Then we add our spry table in the document.
Place the cursor where you want it and click the “Spry table”.
In the dialog that appears I remove the “description” column. I want this in my table, but I want it in the underlying collapsible panel that I’m going to make later.

In the window with several columns I select the columns that I want to sort and check the “sort column when header is clicked” box. What this will do is clear to me.

In the four underlying classes, I had already entered the class-styles. These are different colors for odd and even rows, mouse over plus a selected style.
This need not be completed, but it’s nice to see.

The next checkbox “Update Detail Regions when row is clicked” MUST be checked, otherwise you can not connect the two Spry elements.
Click the OK button.

The table is inserted, we still need the collapsible pane.
Place the cursor below the table and click the “Spry Collapsible panel” in the “Spry” tab.

In the newly created panel, select the default text (content).
Select the “description” link under the “Bindings” tab.
And click the “Insert” button at the bottom of the tab.

This places the xml tag description in the collapsible pane.
What we now need to do is to connect to the above spry table.

First, place your cursor in the collapsible panel where there is no data now.
Right-click in the tag selector in the div tag for “Collapsible panel”.
Select the “Quick Tag Editor” in the drop-down menu. This will edit the tag.
In the “Quick Tag Editor”, place the cursor between the end of the div tag and the greater than sign (>).
Type a space and type spry:
Dreamweaver will help you to find “spry: detailtregion” option in the menu that opens.

Dreamweaver will automatically add the code, the only thing it still needs to know is the name of the dataset you want to use. In this case, this is the “list personnel” data set.
So we type it between the quotes.
Click the Enter button on your keyboard to close the tag editor.

View the page in your browser, Firefox in this case.
Or online: click here
What do we have now?

When we hover over a row, the color of the row changes.
The selected row has a different color.
If we click the column heading “Name”, “Salary”, or “Photo” data will be sorted on this column.
When a row is selected in the top table, the “data” tag about this person is displayed in the collapsible pane.
And of course we can open or close the collapsible panel by clicking on the title.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats