Master/Detail Data Sets
The Spry framework supports the concept of Master/Detail Data Sets. This implies that the selected record in a Master Data Set drives the contents of the Detail Data Set. There are many ways to create this relationship using Spry. In our example the Master Data Set and the Detail Data Set retrieves data from different sections of the same XML file. Each time a new record is selected in the Master Data Set, the Detail Data Set retrieves a subset of the data.

The Master Data Set is used to retrieve the products for the Products table. The Detail Data Set is used to retrieve the product features once a specific product is selected in the Product table.

Detail Data Set Declaration
The Detail Data Set and its relationship to the Master Data Set can be set up easily using one additional line of JavaScript:

Note that the main difference in the Detail Data Set declaration is the XPath. This XPath includes a filter expression and uses a Spry Token. The filter expression limits the nodes that will be returned for the dsProductFeatures Detail Data Set. The Spry token represents the "name" field for the current record in the dsProducts Master Data Set.

In effect the declaration states that the dsProductFeatures Detail Data Set will fetch its data based on the value of the "name" field in the current record of the dsProducts Master Data Set (see Figure 6). Every time the user selects a new record in the Master Data Set, this Detail Data Set will automatically update.

Master/Detail Regions
In Figure 7 the dsProductFeatures Detail Data Set is used to display the features of a selected product in the Accordion widget. When the user chooses a new product in the Product table, the features will change in the Accordion without needing a page refresh.

Spry Widgets
Spry widgets are UI elements that make it easier for your users to interact with the content on the page. The current set of widgets (so far) includes:

• Accordion
• Menu Bar
• Collapsible Panel
• Tabbed Panels
• Text Field
• Text Area
• Checkbox & Checkbox Group
• Select list

• Widgets must be easy to modify (re-style).
• Code must be easy to understand.
• HTML-centric markup.
• No custom tags.
• No programmatic injection of markup.
• Self-contained (limit dependencies on additional libraries).