Solved

Spry XML data set and spry tabbed panel problem

Posted on 2009-05-20
8
1,373 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 1

Author Comment

by:gwh2
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
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…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now