This content has been marked as final.
Show 11 replies
-
1. Re: TabbedPanels Master Detail Data
roborino3 Jul 16, 2008 9:34 AM (in response to roborino3)I was hoping someone might be able to look at this and maybe see what I missed. All appears to work correctly, however visually the tab doesn't switch when you click on it but the data updates correctly. Thanks! -
2. Re: TabbedPanels Master Detail Data
kinblas Jul 16, 2008 12:31 PM (in response to roborino3)HI roborino3,
It's not working properly because if you look closely at how you structured things, you are creating one tab button for every level, but you create only one panel, and write out all of the sponsors for the first level.
Try something like this:
<div spry:region="ds_levels ds_sponsor">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="ds_levels" spry:setrow="ds_levels" class="TabbedPanelsTab" tabindex="0">{ds_levels::name}</li>
</ul>
<div class="TabbedPanelsContentGroup" spry:repeatchildren="ds_levels">
<div spry:repeatchildren="ds_sponsor" class="TabbedPanelsContent">
<p>{ds_sponsor::name}</p>
<p>{ds_sponsor::logo}</p>
<p>{ds_sponsor::url}</p>
<br />
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</div>
Notice the extra spry:repeatchildren on the TabbedPanelsGroup element which causes it to create a panel for each level.
--== Kin ==-- -
3. Re: TabbedPanels Master Detail Data
roborino3 Jul 16, 2008 1:33 PM (in response to kinblas)Thanks Kin...actually, the code you posted does the same as mine. If I view the tabbedpanel the tabs show up correctly, the data shows up correctly if you click a tab, however visually the tab doesn't change (meaning that if I click on the second tab there is still a line under the second tab name and the line is not under the first tab name).
Rob -
4. Re: TabbedPanels Master Detail Data
kinblas Jul 16, 2008 2:05 PM (in response to roborino3)Hi Rob,
It's probably going to be easier if you post a sample url so we can see first-hand what you are doing.
The code I posted is pretty similar to the one in this working sample:
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample2.html
Of course with the exception that you have an extra repeat. Did you notice that I moved the entire tabbed panels markup into a single wrapper div that has a spry:region on it?
--== Kin ==-- -
5. Re: TabbedPanels Master Detail Data
roborino3 Jul 16, 2008 2:17 PM (in response to kinblas)Hi Kin,
Sent you a link to the sample I am working on.
I also noticed that if I click on the next tab, it doesn't visually move, however if I click it a second time it does move correctly.
Thanks,
Rob -
6. Re: TabbedPanels Master Detail Data
kinblas Jul 16, 2008 4:26 PM (in response to roborino3)Ah ok, I see what's going on. I didn't notice that in your original post your ds_sponsor was actually loading data for only the current level in the ds_levels data set. This means that there is only ever one set of sponsors available.
If you look at the content that is generated with the markup I gave you, it is actually creating the correct number of panels. The problem is that all of the panels contain the same data ... for example since platinum is the first level in your ds_levels data set, all of the tabbed panels contain the sponsor information for the platinum level.
The reason why it looks like the tabbed panels widget always resets is because each time you click on a panel tab, it changes the current row of the data set, which causes the ds_sponsors data set to load new data, which causes the region to re-generate its markup and re-initialize the tabbed panels widget.
Now remember I said that all 3 panels had the same content, so you get the false impression that it actually did change to the correct panel, but the tabs didnt' update.
That all said, you have a couple of options:
1. Structure your XML so that it can all be contained within one file.
or
2. If you don't want to re-arrange your data/xml, then you'll have to fake a tabbed panels widget look by having links/elements that look like tabs and have a single container underneath it that is a detail region.
This is something we did for this page:
http://labs.adobe.com/technologies/spry/home.html
http://labs.adobe.com/technologies/spry/home_assets/spry_home.js
--== Kin ==-- -
7. Re: TabbedPanels Master Detail Data
roborino3 Jul 17, 2008 5:08 AM (in response to kinblas)Hi Kin,
Thanks...I think I understand now. I like option 1. However, I am not sure how I could combine the two XML files into one and still be able to read the dataset to produce the tabbedpanels.
Rob -
8. Re: TabbedPanels Master Detail Data
kinblas Jul 17, 2008 10:10 AM (in response to roborino3)Hi Rob,
You can simply take the format you used in your platinum.xml and place it in your sponsors.xml and add the other data from the other gold/silver files:
<?xml version="1.0" encoding="UTF-8"?>
<sponsors>
<level id="Platinum">
<sponsor>
<name>Foo</name>
<logo>Logo here</logo>
<url> http://www.foo.com</url>
</sponsor>
...
</level>
<level id="Gold">
<sponsor>
<name>Bar</name>
<logo>Logo here</logo>
<url> http://www.bar.com</url>
</sponsor>
...
</level>
<level id="Silver">
<sponsor>
<name>Car</name>
<logo>Logo here</logo>
<url> http://www.car.com</url>
</sponsor>
...
</level>
</sponsors>
Then you can simply take advantage of nested data sets:
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript" src="includes/SpryNestedXMLDataSet.js"></script>
...
<script type="text/javascript">
...
var ds_levels = new Spry.Data.XMLDataSet("sponsors.xml", "/sponsors/level");
var ds_sponsors = new Spry.Data.NestedXMLDataSet(ds_levels, "sponsor");
...
</script>
You can get more info on nested data sets here:
http://labs.adobe.com/technologies/spry/samples/data_region/NestedXMLDataSample.html#Using NestedDataSets
--== Kin ==-- -
9. Re: TabbedPanels Master Detail Data
roborino3 Jul 17, 2008 11:11 AM (in response to kinblas)Hi Kin,
Thanks...I got all the XMLs into one file and have all that working. However, I guess I am still missing some thing in the tabbedpanels. Right now you have to double click the tab2 or tab 3 for it to switch visually and data wise. I reposted the URL I sent you previously. Thanks, for all the help!!!
Rob -
10. Re: TabbedPanels Master Detail Data
kinblas Jul 17, 2008 11:16 AM (in response to roborino3)Remove the spry:setrow attribute in your markup. It is no longer needed, and is causing the region to re-generate markup for every click you do ... it's basically the same problem you had before you switched to nested data sets.
--== Kin ==-- -
11. Re: TabbedPanels Master Detail Data
roborino3 Jul 17, 2008 11:40 AM (in response to kinblas)Hi Kin,
Woohoo ... looks like that did it. Thank you very much!!!
Rob

