3 Replies Latest reply on Sep 18, 2009 10:38 AM by krish.tgkk

    Tray Type UI in Flex

    krish.tgkk

      Hi

       

      I am New to Adobe Flex and want to design a Tray type of feature which holds other values too. Is That possible in flex.

       

      I have also attched a .bmp file . Wanted to have that kind of feature. If it is possible could anyone guide me how to achieve the same.

       

      Thank you

       

      Krish

        • 1. Re: Tray Type UI in Flex
          JeffryHouser Level 4

          Although not identical to your screeshot, I'd look into the Accordian.

          1 person found this helpful
          • 2. Re: Tray Type UI in Flex
            Ansury Level 3

            If accordion doesn't work for you, yes you can do that and there's probably half a dozen good ways.

             

            I'd probably start with a custom component based on a VBox consisting of Canvas components and invisible VBoxes underneath each Canvas to hide/show on a click of the +/- toggle button.  But if you want it to have the FULL functionality of that example, you'd want to replace the Canvas and VBox with another custom component.

             

            ex. (shorthand syntax, not 100% correct, and not even close to functional as I just wrote it on the spot in a few minutes)

             

            EnhancedAccordion.as

            <Script>

                 [Bindable]

                 private var topStoriesLinks:ArrayCollection;//Place data for links in this list: text, URL, creation date in an Object etc.

            </Script>

             

            <VBox>

                 <ExpandableView title="Top Stories" links="{topStoriesLinks}"/>

                 <ExpandableView title="Etc" links="{links}"/>

                 <ExpandableView title="Whatever" links="{links}"/>

            </VBox>

             

             

            ExpandableView.as

            <Script>

                 [Bindable]

                 public var title:String;

                 [Bindable]

                 public var links:ArrayCollection;

             

                private function init():void {

                      //Need to do some initialization in here to setup the links, etc.

                 }

            </Script>

             

            <Canvas>

                 <ToggleButton id="expandButton" text="+" x="2" y="2"/>

                 <Text text="{title}"/ x="20" y="2">

                 <ComboBox/> (or whatever for that options menu, whatever it does)

            </Canvas>

             

            <VBox visible="{expandButton.selected}" includeInLayout="visible="{expandButton.selected}"">

                 (whatever component here for the links, could also be added dynamically or simply have a set number and hide any extras)

                 <LinkButton id="link1"/>

                 <LinkButton id="link2 (etc)"/>

                 <LinkButton/>

                 <LinkButton/>

                 <LinkButton/>

            </VBox>

             

             

            It's kind of a cool idea. Maybe I'll throw one together some time and upload it for people to use.

            • 3. Re: Tray Type UI in Flex
              krish.tgkk Level 1

              Hi

               

              Thank you for your replies. I am very much new to this world of flex, like I would say 2 days old.

               

              So if possible please send me some small projects of this type. It would be really helpful for me as this is one of the requirement that users are asking and I am digging deep into it.

               

              Appreciate your help to start out with.

               

              Thank you