Spry XML data set and spry tabbed panel problem

Hi everyone,

I wanted to use a spry xml data set to be used as the data to be pulled into a spry tabbed panel widget.

The data below is the information I have in an xml file. I wanted the value of the 'type' attribute (ie. <packageType type="Level 1">) to populate the name of the tabs, and then the 'description' and 'price' nodes, as well as the 'name' attribute (ie. <image url="images/l2one.jpg" name="text here"></image>)  to populate the content of the tabs.

As a starter, I tried doing the following:

    <div id="TabbedPanels1" class="TabbedPanels" spry:region="dsLevels">
      <ul class="TabbedPanelsTabGroup" spry:repeat="dsLevels" >
        <li class="TabbedPanelsTab" tabindex="0" >Level 1</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
        <div class="TabbedPanelsContent"> Content 3 </div>
        <div class="TabbedPanelsContent">Content 4</div>
      </div>
    </div>

...but all this gave me was 4 correctly named tabbed panels but only one content region, ie. for the 'Level 1' tab.

If the above can be achieved, I wanted the data from the 'name' attribute (ie. the name of the image) to be a link which when clicked on would display the image drawn from the url attribute, (ie. <image url="images/l1one.jpg"...).

I don't even know if this is possible because it may required nested regions which I'm not even sure are supported, but does anyone know if this type of application is able to be done in Dreamweaver CS4 without going into the .js files (as my javascript coding is limited)?

Appreciate any advice.




<?xml version="1.0" encoding="UTF-8"?>
 
<packages>
 
	<packageType type="Level 1">
		<description> text here </description>
		<price>$XXX </price>
		<image url="images/l1one.jpg" name="text here"></image>
	</packageType>
 
	<packageType type="Level 2">
		<description> text here </description>
		<price> $XXX </price>
		<image url="images/l2one.jpg" name="text here"></image>
		<image url="images/l2two.jpg" name="text here"></image>
		<image url="images/l2three.jpg" name="text here"></image>
		<image url="images/l2four.jpg" name="text here"></image>
		<image url="images/l2five.jpg" name="text here"></image>
		<image url="images/l2six.jpg" name="text here"></image>
		<image url="images/l2seven.jpg" name="text here"></image>
	</packageType>
 
	<packageType type="Level 3">
		<description> text here </description>
		<price> $XXX </price>
		<image url="images/l3one.jpg" name="text here"></image>
	</packageType>
 
	<packageType type="Level 4">
		<description> text here </description>
		<price> $XXX </price>
		<image url="images/l4one.jpg" name="text here"></image>
	</packageType>
</packages>

Open in new window

LVL 1
gwh2Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jason C. LevineConnect With a Mentor No oneCommented:
Hi gwh2,

>> I don't even know if this is possible because it may required nested regions which I'm not even sure are
>> supported, but does anyone know if this type of application is able to be done in Dreamweaver CS4 without going
>> into the .js files (as my javascript coding is limited)?

You can do this and it does require nested regions.  

Some required reading.

http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WSC0DC5D76-B6F1-41ae-9E59-586A119AA7C5.html

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html

http://groups.google.com/group/macromedia.dreamweaver.appdev/browse_thread/thread/13aaf6e6b192db77?pli=1

The first link is just the Adobe nesting help file.  The second link shows how to build dynamic accordions but you can easily adapt that to your needs.

The third is a bit of an advanced way to do things but allows more flexibility.  Nothing involves editing the JS file, just learning how to pass values around in the web page.
0
 
gwh2Author Commented:
Thanks for the links.

I've just tried testing some code but when I preview in the browser I get the following error:

"Found a nested spry:region in the following markup. Nested regions are currently not supported.:

I'm not sure why it's saying they're not supported when the adobe tutorial uses them.

Do you know what's going on?

0
 
gwh2Author Commented:
I just tried adding a piece of code, ie.

<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryNestedXMLDataSet.js"></script>

...and this got rid of the error, however I"m still not getting the effect I"m looking for (see screenshot). All the tabs are stacked up one under the other and the content is to the right instead of being beneath each tab. The tabs are also not clickable.

Do you have any ideas?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryNestedXMLDataSet.js"></script>
<script type="text/javascript">
<!--
var dsPackages = new Spry.Data.XMLDataSet("dataSet.xml", "packages/packageType", {sortOnLoad: "@type", sortOrderOnLoad: "ascending"});
//-->
</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="oneColFixCtrHdr">
 
<div id="container">
  <div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
  <div id="mainContent">
<div spry:region="dsPackages">
  <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup" spry:repeat="dsPackages">
      <li class="TabbedPanelsTab" tabindex="0">{dsPackages::@type}</li>
      <li class="TabbedPanelsContent" tabindex="0">{dsPackages::price} | {dsPackages::description}</li>
      </ul>
    <ul class="TabbedPanelsContentGroup">
      <li class="TabbedPanelsContent">Content 1</li>
      <li class="TabbedPanelsContent">Content 2</li>
      </ul>
  </div>
</div>
</div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>

Open in new window

Picture-5.png
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Jason C. LevineNo oneCommented:
Hard to say because I don't have your data so I can't really rebuild the page on this end to test.  I would create multiple datasets, though.  A master set and then a child dataset that gets filtered by the master.
0
 
gwh2Author Commented:
Okay, so I have the following code now:

 
   
     
  • {@type}
     
       
        {price}

        {description}

        {image/@name}

       
   

... and it ends up looking like the attached screenshot.

The xml file code is below.

The css code wasn't touched, ie. it's the default css code that's rendered by the widget.

Do you think it could be a css issue with regard to why the panels are stacked as they are instead of being beside each other.

You mentioned a master set and then a child set - can you explain where this code would go if you think it would solve the problem?

Appreciate any further help.



<?xml version="1.0" encoding="UTF-8"?>
<packages>
	<packageType type="Level 1">
		<description> text here </description>
		<price>$XXX </price>
		<image url="images/l1one.jpg" name="line of text1L1"></image>
	</packageType>
	<packageType type="Level 2">
		<description> text here </description>
		<price>$XXX</price>
		<image url="images/l2one.jpg" name="line of text1L2"></image>
		<image url="images/l2two.jpg" name="line of text2L2"></image>
		<image url="images/l2three.jpg" name="line of text3L2"></image>
		<image url="images/l2four.jpg" name="line of text4L2"></image>
		<image url="images/l2five.jpg" name="line of text5L2"></image>
		<image url="images/l2six.jpg" name="line of text6L2"></image>
		<image url="images/l2seven.jpg" name="line of text7L2"></image>
	</packageType>
	<packageType type="Level 3">
		<description> text here </description>
		<price>$XXX</price>
		<image url="images/l3one.jpg" name="line of text1L3"></image>
	</packageType>
	<packageType type="Level 4">
		<description> text here </description>
		<price>$XXX </price>
		<image url="images/l4one.jpg" name="line of text1L4"></image>
	</packageType>
</packages>

Open in new window

Picture-6.png
0
 
gwh2Author Commented:
For some reason, the code in the previous post didn't render above so I've pasted it below again.

Thanks
  <div spry:region="dsPackages">
    <div id="TabbedPanels2" class="TabbedPanels" spry:repeat="dsPackages">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">{@type}</li>
        </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
        <p>{price}</p>
        <p>{description}</p>
        <p>{image/@name}</p></div>
        </div>
    </div>

Open in new window

0
 
gwh2Author Commented:
Actually below is the current code - I forget to copy an extra closing div tag at the end.
    <div id="TabbedPanels2" class="TabbedPanels" spry:repeat="dsPackages">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">{@type}</li>
        </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
        <p>{price}</p>
        <p>{description}</p>
        <p>{image/@name}</p></div>
        </div>
    </div>
  </div>

Open in new window

0
 
gwh2Author Commented:
Thanks for this - I needed to close this question and reopen it again as I don't seem to be getting any further advice.
0
All Courses

From novice to tech pro — start learning today.