8 Replies Latest reply on Nov 16, 2010 10:53 AM by Lee Burrows

    Put Image on label

    jack.Flex

      How can I put Image on label in flex can any one tel me

        • 1. Re: Put Image on label
          learner_doug Level 1

          I don't believe you can associate a label with an image directly without some kind of custom skinning.  And even then I'm not sure.  But what you could do to get the same effect is to put the label inside a container that can have an image associated with it such as bordercontainer.  I realize this is a bit klunky, but it may be the best way to do it for now.

           

           

          <s:BorderContainer x="100" y="200" borderVisible="false" height="100%" width="100%" >

          <s:Label text="Label" color="#000000" depth="10" />

          <s:Rect width="70" height="30" >

          <s:fill>

          <s:BitmapFill source="@Embed('image.jpg')" alpha="1"/>

          </s:fill>

          </s:Rect>

          </s:BorderContainer>

          • 2. Re: Put Image on label
            jack.Flex Level 1

            Thanx for help but Now i got one problem that "How could i put image on Buttonbar for all different buttons on it can u please help me thNK YOU

            • 3. Re: Put Image on label
              learner_doug Level 1

              Never tried that, but I strongly suspect you could do it with a custom skin. 

               

              Good luck!

              • 4. Re: Put Image on label
                learner_doug Level 1

                Also, you might want to post the buttonBar question separately so that more people can see it.

                • 6. Re: Put Image on label
                  jack.Flex Level 1

                  thank you very much.

                  • 7. Re: Put Image on label
                    jack.Flex Level 1

                    import events.ToolbarEvent;

                     

                    import mx.events.FlexEvent;

                    import mx.events.ItemClickEvent;

                    import mx.events.SliderEvent;

                    import mx.core.*;

                     

                    import spark.skins.spark.ImageSkin;

                     

                    import ui.presenters.MainPresentationModel;

                     

                                [Bindable]

                                public var fileButtons:Array = [{label:"Open"},{label:"Save"}];

                                [Bindable]

                                public var navButtons:Array =

                                [

                                    {label:"Adjust",state:MainPresentationModel.ADJUST_STATE},

                                    {label:"Touchup",state:MainPresentationModel.TOUCHUP_STATE},

                                    {label:"Effects",state:MainPresentationModel.EFFECT_STATE}

                                ];

                                [Bindable]

                                public var historyButtons:Array = [{label:"Undo"},{label:"Redo"}];

                     

                                private function handleFileClick(e:ItemClickEvent):void

                                {

                                    if (e.label == "Open")

                                        dispatchEvent(new ToolbarEvent(ToolbarEvent.OPEN));

                                    else if (e.label == "Save")

                                        dispatchEvent(new ToolbarEvent(ToolbarEvent.SAVE));

                                }

                     

                                private function handleNavClick(e:ItemClickEvent):void

                                {

                                    callLater(handleNavigation,[e.item.state]);

                                }

                     

                                private function handleNavigation(state:String):void

                                {

                                    if (navBar.selectedIndex == -1)

                                        dispatchEvent(new ToolbarEvent(ToolbarEvent.SHOW));

                                    else

                                        dispatchEvent(new ToolbarEvent(ToolbarEvent.SHOW,true,false,state));

                                }

                     

                                private function handleHistoryClick(e:ItemClickEvent):void

                                {

                                    if (e.label == "Undo")

                                        dispatchEvent(new ToolbarEvent(ToolbarEvent.UNDO));

                                    else if (e.label == "Redo")

                                        dispatchEvent(new ToolbarEvent(ToolbarEvent.REDO));

                                }

                     

                                private function handleZoomChange(e:SliderEvent):void

                                {

                                    dispatchEvent(new ToolbarEvent(ToolbarEvent.ZOOM, true, false, null, e.value));

                                }

                            ]]>

                        </mx:Script>

                     

                     

                        <mx:ButtonBar dataProvider="{fileButtons}" itemClick="handleFileClick(event)"   />

                     

                     

                        <mx:ToggleButtonBar id="navBar" dataProvider="{navButtons}" toggleOnClick="true"

                            creationComplete="event.target.selectedIndex=-1" itemClick="handleNavClick(event)"/>

                        <mx:Button label="Show Source" click="dispatchEvent(new ToolbarEvent(ToolbarEvent.SRC))"  />

                     

                     

                     

                        <mx:Spacer width="100%" />

                        <mx:ButtonBar dataProvider="{historyButtons}" itemClick="handleHistoryClick(event)"  />

                        <mx:HSlider value="1.0" minimum="0.1" maximum="3.0" snapInterval="0.1" liveDragging="true" change="handleZoomChange(event)" />

                    </mx:HBox>

                    can u please tell me how can i add image on Button bar in this code???

                    • 8. Re: Put Image on label
                      Lee Burrows Level 4

                      for flex 3 components (like your lastest code example), it cant be done - you would need to create a custom component

                       

                      for flex 4 components (eg s:ButtonBar) you can create a custom skin based on spark.skins.spark.ButtonBarSkin