8 Replies Latest reply on Jan 11, 2007 8:11 PM by

    Breadcrumb generation

      I have a list of link buttons that become visible as things in a tilelist are clicked on (ie a dynamic breadcrumb) and the label property of each are changed based on what in the tilelist has been clicked on. I am having serious problems trying to position these things based on the size of the label. If I create an HBox then there is too much space in-between the link buttons and I can't figure out how to get rid of it. If I go without an HBox and just set the x position based on the previous link button label length that doesn't work either because [label id].label.length returns just the length of characters in the label and not it's length in pixels. I also tried [label id].width but this value appears to be the largest width the link button has been set to thus far. So if the link button gets assigned a label of 20 characters and then later on in the program it gets assigned one with only 5 then the width property still remains 20. Anyone got any idea how to either convert length in characters to length in pixels OR reduce the spacing between items in an HBox. I have tried setting the paddingleft to 0, the width of child items to 0% the width of child items to 0, you name it I feel like I’ve tried it. But it's almost like the HBox has a built in minimum padding that I can't seem to figure out how to change.
        • 1. Re: Breadcrumb generation
          FlightGuy Level 1
          Try using an HBox, and set its horizontalGap to zero. You shouldn't need to be fiddling with absolute positioning.

          Tim
          • 2. Re: Breadcrumb generation
            Alright so I threw together this quick example with the horizontalGap:
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" >
            <mx:HBox horizontalGap="0">
            <mx:LinkButton id="linkHome" label="Home" visible="true" />
            <mx:Label id="breadcrumb1" text=">" visible="true" paddingTop="2"/>
            <mx:LinkButton id="linkGroup" label="Group" visible="true" />
            <mx:Label id="breadcrumb2" text=">" visible="true" paddingTop="2"/>
            <mx:Label id="labelAlbum" text="Album" visible="true" paddingTop="2"/>
            </mx:HBox>
            </mx:Application>

            If you look at it there is way too much whitespace in between each item in the HBox still. Any ideas?
            • 3. Re: Breadcrumb generation
              FlightGuy Level 1
              I haven't tried it - will do if it still doesn't work after this - the LinkButton has a default paddingLeft and paddingRight of 3 pixels - try setting it to zero.

              Tim
              1 person found this helpful
              • 4. Re: Breadcrumb generation
                FlightGuy Level 1
                OK, I tried it and I see your problem. Consider using the LinkBar instead. Try this...

                <mx:LinkBar x="96" y="40" horizontalGap="0">
                <mx:Array>
                <mx:String>Home</mx:String>
                <mx:String>Group</mx:String>
                <mx:String>Album</mx:String>
                </mx:Array>
                </mx:LinkBar>

                See the example in the component explorer for how to use a LinkBar with a ViewStack.

                Tim
                1 person found this helpful
                • 5. Re: Breadcrumb generation
                  FlightGuy Level 1
                  You can set the selectedIndex property of the LinkBar to one of your items to desensitize it. To match your example, you can set selectedIndex=2.

                  Tim
                  • 6. Re: Breadcrumb generation
                    Alright so I threw this together:

                    <mx:LinkBar paddingLeft="0" paddingRight="0" selectedIndex="4" x="96" y="40" horizontalGap="0" >
                    <mx:Array>
                    <mx:String >Home</mx:String>
                    <mx:String>></mx:String>
                    <mx:String>Group</mx:String>
                    <mx:String>></mx:String>
                    <mx:String>Album</mx:String>
                    </mx:Array>
                    </mx:LinkBar>

                    But there are some problems with this:
                    desensitizing it makes it too light and its hard to see
                    even the breadcrums have links
                    even if I desensitize it the finger still shows when you mouseover so it looks like you can still click on it
                    the spacing is still too far apart
                    the padding idea, while a good one, doesn't seem to work in this instance or in the other one using an HBox

                    So I'm still at a loss for what to do. I would contemplate settling with an HBox but even if I wanted to settle for the spacing problem it still has issues, my 3 stages are laid out below:

                    1) Home (linked button)
                    2) Home (linked button) > [Group Name] (non-linked)
                    3) Home (linked button) > [Group Name] (linked button) > [Album Name] (non-linked)

                    So in order to do this I have an HBox with the following order of components:
                    linkbutton, label, linkbutton, label, label

                    So in step two I need the first label and one of the next labels but not the linkbutton in between. Well unfortunately the linkbutton in the middle of them is a placeholder for itself whether you make it visible or enabled or whatever so not only is the spacing a little more then I want but in step two the spacing is way too long because of that invisible linkbutton that is holding its own place. Ugh stupid Hbox....
                    • 7. Re: Breadcrumb generation
                      FlightGuy Level 1
                      So do I understand correctly that you actually want the '>' so you can show a hierarchy? I've done something similar with a customized ButtonBar, but I don't bother with any symbol in between.

                      It would be wrong add a link in between for the 'breadcrumb' - you can, however, specify your own skin for the separator. Also, the color used for the insensitive item is customizable.

                      I think the LinkBar is the right control to use as a base for this, and I can see it would be a custom control other people would be interested in using. If you don't manage it soon I'd be happy to throw something together and share it. It'll not be 'till late next week, though.

                      Tim
                      1 person found this helpful
                      • 8. Breadcrumb generation
                        Bingo, I got it. Thanks Flightguy for your padding idea because that did come into play I believe. I included the complete code for a simple version below. I knew it was a somewhat simple solution.

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

                        <mx:Script>
                        <![CDATA[

                        public function clickgroup(event:MouseEvent):void{
                        lb1.visible=true;
                        lb1.label="Home";
                        lbl1.visible=true;
                        lbl1.text="> Grp Name";
                        }
                        public function clickalbum(event:MouseEvent):void{
                        lbl1.text=">";
                        lb2.visible=true;
                        lb2.label="grp name";
                        lbl2.visible=true;
                        lbl2.text="> album name"
                        lbl1.width=12
                        }
                        public function clickback(event:MouseEvent):void{
                        lb1.visible=true;
                        lb1.label="Home";
                        lbl1.visible=true;
                        lbl1.width=200;
                        lbl1.text="> Grp Name";
                        lb2.visible=false;
                        lbl2.visible=false;
                        }
                        ]]>
                        </mx:Script>
                        <mx:Canvas width="455" height="370" x="10" y="10" backgroundColor="#c0c0c0">

                        <mx:HBox horizontalGap="0">
                        <mx:LinkButton id="lb1" label="Home" paddingLeft="0" paddingRight="0" visible="false"/>
                        <mx:Label id="lbl1" visible="false" text=">" paddingTop="2" />
                        <mx:LinkButton id="lb2" visible="false" paddingLeft="0" paddingRight="0"/>
                        <mx:Label id="lbl2" visible="false" paddingTop="2"/>
                        </mx:HBox>

                        <mx:Button label="click album" click="clickalbum(event);" x="10" y="93"/>
                        <mx:Button label="click group" click="clickgroup(event);" x="10" y="63"/>
                        <mx:Button label="click back to group" click="clickback(event);" x="10" y="123"/>
                        </mx:Canvas>
                        </mx:Application>