### Creating a Tabbed Panels Widgetwith Spry Data

This page gives a couple of examples of how to generate an Tabbed Panels widget with Spry Data.

### Example 1

In this example we are creating a TabbedPanels widget that has a panel for each employee within the data set called dsEmployees. We start off by creating a spry:region div. We then insert the markup for TabbedPanels widget with one tabbed panel. We then place a spry:repeat attribute on the TabbedPanelsTab <li> and TabbedpanelsContent <div> so that a tab button and content panel gets created 5for each row in the data set:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
    <head>

    ...

    <link href="lib/spry/widgets/tabbedpanels/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

    ...

    <script language="JavaScript" type="text/javascript" src="lib/spry/includes/xpath.js"></script>
    <script language="JavaScript" type="text/javascript" src="lib/spry/includes/SpryData.js"></script>
    <script language="JavaScript" type="text/javascript" src="lib/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>

    <script type="text/javascript">

    var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", "employees/employee");

    </script>

    ...

    <body>

    ...

    <div id="example1Region" spry:region="dsEmployees">
    	<div id="TP1" class="TabbedPanels">
    		<ul class="TabbedPanelsTabGroup">
    			<li spry:repeat="dsEmployees" class="TabbedPanelsTab" tabindex="0">{username}</li>
    		</ul>
    		<div class="TabbedPanelsContentGroup">
    			<div spry:repeat="dsEmployees" class="TabbedPanelsContent">{firstname} {lastname}</div>
    		</div>
    	</div>
    	<script type="text/javascript">
    var t1 = new Spry.Widget.TabbedPanels("TP1");
    </script>
    </div>

    ...

    </body>
    </html>

The interesting thing to note about the code above is that the script block for the widget constructor is *inside* the spry:region. By placing the script block inside the region, it means that the constructor will get run anytime the markup in the region is regenerated, creating a new widget object for the new markup.

Here's a working version of the code above:

- {username}

{firstname} {lastname}

### Example 2

This example is almost identical to Example 1, except that it uses a spry:region observer which is triggered during the "onPostUpdate" event *after* the region regenerates its markup:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
    <head>

    ...

    <link href="lib/spry/widgets/tabbedpanels/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

    ...

    <script language="JavaScript" type="text/javascript" src="lib/spry/includes/xpath.js"></script>
    <script language="JavaScript" type="text/javascript" src="lib/spry/includes/SpryData.js"></script>
    <script language="JavaScript" type="text/javascript" src="lib/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>

    <script type="text/javascript">

    var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", "employees/employee");

    var observer = { onPostUpdate: function(notifier, data) { var p2 = new Spry.Widget.TabbedPanels("TP2"); } };
    Spry.Data.Region.addObserver("example2Region", observer);

    </script>

    ...

    <body>

    ...

    <div id="example2Region" spry:region="dsEmployees" class="liveSample">
    	<div id="TP2" class="TabbedPanels">
    		<ul class="TabbedPanelsTabGroup">
    			<li spry:repeat="dsEmployees" class="TabbedPanelsTab" tabindex="0">{username}</li>
    		</ul>
    		<div class="TabbedPanelsContentGroup">
    			<div spry:repeat="dsEmployees" class="TabbedPanelsContent">{firstname} {lastname}</div>
    		</div>
    	</div>
    </div>

    ...

    </body>
    </html>

Here's a working version of the code above:

- {username}

{firstname} {lastname}