11 Replies Latest reply: Jul 17, 2008 11:40 AM by roborino3 RSS

    TabbedPanels Master Detail Data

    roborino3 Community Member
      Missing just a little something to make the tabs switch. The data shows properly, however when you select the tab it doesn't visually switch the tab, the data does switch for the correct tab. What am I missing???

      Here is the code:

      var ds_levels = new Spry.Data.XMLDataSet("sponsor.xml", "sponsors/level");
      var ds_sponsor = new Spry.Data.XMLDataSet("{ds_levels::url}", "sponsors/level/sponsor");
      //-->
      </script>
      </head>

      <body>
      <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" spry:region="ds_levels">
      <li spry:repeat="ds_levels" spry:setrow="ds_levels" class="TabbedPanelsTab" tabindex="0">{ds_levels::name}</li>
      </ul>
      <div class="TabbedPanelsContentGroup" spry:region="ds_sponsor">
      <div spry:repeatchildren="ds_sponsor" class="TabbedPanelsContent"><p>{ds_sponsor::name}</p><p>{ds_sponsor::logo}</p><p>{ds_spon sor::url}</p><br /></div>
      <script type="text/javascript">
      <!--
      var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
      //-->
      </script>
      </div>
      </div>
        • 1. Re: TabbedPanels Master Detail Data
          roborino3 Community Member
          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 Community Member
            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 Community Member
              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 Community Member
                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 Community Member
                  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 Community Member
                    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 Community Member
                      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 Community Member
                        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 Community Member
                          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 Community Member
                            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 Community Member
                              Hi Kin,

                              Woohoo ... looks like that did it. Thank you very much!!!

                              Rob