4 Replies Latest reply on Feb 18, 2010 8:37 AM by dtangram

    Change LinkButton into Button

    dtangram

      I am working on a Website for my company and I need the LinkButtons, which are in a LinkBar and housed in a VBox container, which is contained in a ViewStack, to become a Button with a 2-color gradient when clicked.

       

      Here's the code:

       

      <mx:LinkBar

       

      styleName="myCustomLinkButtonStyleName" color="#ffffff" x="158.2" y="93.1" dataProvider="{myViewStack}"

      themeColor="

      #FFFFFF" fontSize="10" width="664" height="23.95" alpha="1.0" disabledColor="#bebebe"/>

       

       

      <mx:ViewStack id="myViewStack" borderStyle="none" width="607.15686" height="30" x="146.8" y="110.7" >

       

       

      <mx:VBox id="home" x="228.2" y="89.1" label="Home" color="#FFFFFF" fontSize="8" themeColor="#FFFFFF"

      textAlign="

      center" width="68.39162" height="16.451048" click="myViewStack2.selectedChild=homepage">

       

      </mx:VBox>

       

       

      <mx:VBox id="accounts" x="285.85" y="89.1" label="Accounts" color="#FFFFFF" fontSize="8" themeColor="#FFFFFF"

      cornerRadius="

      0" width="607.16003" height="24.599998" >

       

      <mx:HBox width="100%" paddingTop="3">

       

      <mx:LinkButton id="ab" label="AutoBudget" color="#000000" themeColor="#FFFFFF" cornerRadius="0" fontSize="9" click="myViewStack2.selectedChild=autobudget,changeStyles(event);" fontWeight="normal" fontFamily="Verdana" width="90.5" height="20"/>

       

       

      </mx:HBox>

       

      </mx:VBox>

       

      </mx:ViewStack>

       

       

       

      Any help would be greatly appreciated. Thanks in advanced.

        • 1. Re: Change LinkButton into Button
          Gregory Lafrance Level 6

          Place the VBox containing the link buttons in a canvas, and have another VBox containing buttons that effectively overlay the linkbuttons. The buttons will be visible="false", but when the corresponding link button is clicked, make the button visible and the button visible.

           

          If they are in a linkbar, this won't work.

           

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Change LinkButton into Button
            dtangram Level 1

            Thanks very much for your prompt reply. My problem is that I'm fairley new to Flex; therefore, I find it difficult to comprehend your resolution. Such as, how do I overlay a VBox on top of another VBox? What will support my dataProvider that points to my ViewStack because as of now I have my linkbar pointing to my ViewStack as dataProvider. I hope I'm making sense.

            • 3. Re: Change LinkButton into Button
              Gregory Lafrance Level 6

              This is a bit for you to digest, and you surely will need to twea it a bit, but I think you'll be pleased with it.

               

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                horizontalAlign="center">
                <mx:Script>
                  <![CDATA[
                    import mx.containers.Canvas;
                    import mx.containers.VBox;
                    import mx.collections.ArrayCollection;
                    [Bindable] private var ac1:ArrayCollection = new ArrayCollection([
                      "one_one", "one_two", "one_three"
                    ]);
                    [Bindable] private var ac2:ArrayCollection = new ArrayCollection([
                      "two_one", "two_two", "two_three"
                    ]);
                    [Bindable] private var ac3:ArrayCollection = new ArrayCollection([
                      "three_one", "three_two", "three_three"
                    ]);
                    
                    private function setItem(evt:MouseEvent):void{
                      var targetObject:DisplayObject = evt.currentTarget as DisplayObject;
                      var parentVbox:VBox = targetObject.parent as VBox;
                      var parentParentCanvas:Canvas = parentVbox.parent as Canvas;
                      var parentIndex:uint = parentParentCanvas.getChildIndex(parentVbox);
                      var targetIndex:uint = parentVbox.getChildIndex(targetObject);
                      targetObject.visible = false;
                      if(parentIndex == 0){
                        var otherVbox1:VBox = parentParentCanvas.getChildAt(1) as VBox;
                        var otherTarget1:DisplayObject = otherVbox1.getChildAt(targetIndex);
                        otherTarget1.visible = true;
                      }else{
                        var otherVbox2:VBox = parentParentCanvas.getChildAt(0) as VBox;
                        var otherTarget2:DisplayObject = otherVbox2.getChildAt(targetIndex);
                        otherTarget2.visible = true;
                      }
                    }
                  ]]>
                </mx:Script>
                <mx:LinkBar dataProvider="{vs}"/>
                <mx:ViewStack id="vs" width="100%" height="100%">
                  <mx:Canvas label="one">
                    <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:Repeater id="rp1" dataProvider="{ac1}">
                        <mx:LinkButton label="{rp1.currentItem}" click="setItem(event)"/>
                      </mx:Repeater>
                    </mx:VBox>
                    <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:Repeater id="rp2" dataProvider="{ac1}">
                        <mx:Button label="{rp2.currentItem}" click="setItem(event)" visible="false"/>
                      </mx:Repeater>
                    </mx:VBox>
                  </mx:Canvas>
                  <mx:Canvas label="two">
                    <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:Repeater id="rp3" dataProvider="{ac2}">
                        <mx:LinkButton label="{rp3.currentItem}" click="setItem(event)"/>
                      </mx:Repeater>
                    </mx:VBox>
                    <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:Repeater id="rp4" dataProvider="{ac2}">
                        <mx:Button label="{rp4.currentItem}" click="setItem(event)" visible="false"/>
                      </mx:Repeater>
                    </mx:VBox>
                  </mx:Canvas>
                  <mx:Canvas label="three">
                    <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:Repeater id="rp5" dataProvider="{ac3}">
                        <mx:LinkButton label="{rp5.currentItem}" click="setItem(event)"/>
                      </mx:Repeater>
                    </mx:VBox>
                    <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:Repeater id="rp6" dataProvider="{ac3}">
                        <mx:Button label="{rp6.currentItem}" click="setItem(event)" visible="false"/>
                      </mx:Repeater>
                    </mx:VBox>
                  </mx:Canvas>
                </mx:ViewStack>
              </mx:Application>
              
              • 4. Re: Change LinkButton into Button
                dtangram Level 1

                Thank you very much. This was a big help!!