Solved

Spry XML data set and spry tabbed panel problem

Posted on 2009-05-20
8
1,391 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:gwh2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
8 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 24434369
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
 
LVL 1

Author Comment

by:gwh2
ID: 24437672
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
 
LVL 1

Author Comment

by:gwh2
ID: 24437800
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
Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24438381
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
 
LVL 1

Author Comment

by:gwh2
ID: 24448365
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
 
LVL 1

Author Comment

by:gwh2
ID: 24448374
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
 
LVL 1

Author Comment

by:gwh2
ID: 24448504
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
 
LVL 1

Author Closing Comment

by:gwh2
ID: 31583480
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question