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
Solved

Spry XML data set and spry tabbed panel problem

Posted on 2009-05-20
8
1,381 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
  • 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

 
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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Request.Querystring with Cookie 5 313
Why does this script not work in this site 2 308
Remove LF from html text 5 418
Saving Form Data when Leaving Page 3 360
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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…
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

828 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