2 Replies Latest reply on Jun 25, 2007 4:59 AM by John_Milton

    Accordian

    John_Milton
      I'm using an Accordian to display data retrieved from a database and would like to display a message if there is no data returned to display in a child container. Using a Repeater, if there is no data then nothing is displayed. Instead I'd like to display a "no data was returned" message so that it's clear that the lookup completed.

      I've come up with a solution to put the message "underneath" the content (with an opaque background) so the message is hidden so long as there is some data to display. This works OK but seems a bit klunky - is there a better/easier way?

      Example :

      <mx:Script>
      <![CDATA[

      [Bindable] private var myData:XML =
      <TestData>
      <First>
      <Item><Content>First : Item 1</Content></Item>
      <Item><Content>First : Item 2</Content></Item>
      <Item><Content>First : Item 3</Content></Item>
      </First>
      <Second>
      <Item><Content>Second : Item 1</Content></Item>
      <Item><Content>Second : Item 2</Content></Item>
      <Item><Content>Second : Item 3</Content></Item>
      </Second>
      </TestData>;

      ]]>
      </mx:Script>

      <mx:Accordion width="100%" height="100%" >

      <!-- Originally using a VBox... -->

      <mx:VBox label="First" width="100%" height="100%">
      <mx:Repeater id="rptFirst" dataProvider="{myData.First.Item}">
      <mx:Text text="{rptFirst.currentItem.Content}" />
      </mx:Repeater>
      </mx:VBox>

      <!-- Use canvas with Text obscured by VBox with opaque background... -->

      <mx:Canvas label="Second" width="100%" height="100%">
      <mx:Text text="Text to display if no data..." y="10"/>
      <mx:VBox y="10" alpha="1" backgroundColor="#6666ff">
      <mx:Repeater id="rptSecond" dataProvider="{myData.Second.Item}">
      <mx:Text text="{rptSecond.currentItem.Content}" />
      </mx:Repeater>
      </mx:VBox>
      </mx:Canvas>

      <!-- No data, so text shows... -->

      <mx:Canvas label="Third" width="100%" height="100%">
      <mx:Text text="Text to display if no data..." y="10"/>
      <mx:VBox y="10" alpha="1" backgroundColor="#6666ff">
      <mx:Repeater id="rptThird" dataProvider="{myData.Third.Item}">
      <mx:Text text="{rptThird.currentItem.Content}" />
      </mx:Repeater>
      </mx:VBox>
      </mx:Canvas>

      </mx:Accordion>

      I guess I could parse the data in the result handler and add/remove children using AS, but wonder if I'm missing something easier?! Thanks for any suggestions...

      John

        • 1. Re: Accordian
          BLXWebMaster Level 1
          Why not create a two canvas's on top of eachother. Then just check the length of the data provider. If zero, hide the canvas you don't want to display. Or just use two different ViewStates.

          Al
          • 2. Re: Accordian
            John_Milton Level 1
            Thanks for the suggestions; I've played around with it a bit more and decided to use a ViewStack, eg :

            <!-- Set ViewStack selectedIndex = 0 for no data, = 1 for data -->

            <mx:Canvas label="Fourth" width="100%" height="100%">
            <mx:ViewStack id="vsAltContent" creationPolicy="all">
            <mx:VBox>
            <mx:Text text="Text to display if no data..."/>
            </mx:VBox>
            <mx:VBox>
            <mx:Repeater id="rptFourth" dataProvider="{myData.Fourth.Item}">
            <mx:Text text="{rptFourth.currentItem.Content}" />
            </mx:Repeater>
            </mx:VBox>
            </mx:ViewStack>
            </mx:Canvas>

            and then test (myData.Fourth.Item.length() == 0) to set vsAltContent.selectedIndex accordingly.

            This seems clearer in the MXML than what I started with and easy to code.

            Many thanks

            John