Creating an Tabbed Panels Widget with Spry Data

Creating a Tabbed Panels Widget with 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="../../widgets/tabbedpanels/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

...

<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../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="../../widgets/tabbedpanels/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

...

<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../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}