CODEWITHSUNDEEP
actionscript-3apache-flexflex3
Chris
Chris

Reputation: 85

Using Embedded Images in a ButtonBar

What is the best way to use embedded images in a buttonbar in actionscript? We currently have the following buttonbar that is attached to a textarea that is visible once you select the textarea:

    <mx:ButtonBar id="textEdits"
              x="0" y="-20"
              doubleClickEnabled="false" includeInLayout="{model.textSelected}"
              itemClick="{handleTextEditClick(event);}" buttonHeight="20" buttonWidth="20" visible="{model.textSelected}">
    <mx:dataProvider>
        <mx:Array>
            <mx:Object icon="@Embed(source='/assets/icons/edit.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/bold.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/italic.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/underline.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/left.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/center.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/right.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/justify.png')" />
        </mx:Array>
    </mx:dataProvider>
</mx:ButtonBar>

This is working just fine, but we are going through an architecture change and are moving the buttonbar from a click event (which fired has access to the mxml file) to a mouseover event (which is handled entirely in actionscript). As a result need to convert the buttonbar over to actionscript. Here is what we have so far:

        private var images:Array;
    private const IMAGE_COUNT:uint = 8;

    [Embed(source = '/assets/icons/edit.png')]
    private var Image0:Class;

    [Embed(source = '/assets/icons/bold.png')]
    private var Image1:Class;

    [Embed(source = '/assets/icons/italic.png')]
    private var Image2:Class;

    [Embed(source = '/assets/icons/underline.png')]
    private var Image3:Class;

    [Embed(source = '/assets/icons/left.png')]
    private var Image4:Class;

    [Embed(source = '/assets/icons/center.png')]
    private var Image5:Class;

    [Embed(source = '/assets/icons/right.png')]
    private var Image6:Class;

    [Embed(source = '/assets/icons/justify.png')]
    private var Image7:Class;

    public function createButtonBar():void
    {

        images = new Array(Image0, Image1, Image2, Image3, Image4, Image5, Image6, Image7);

        textEdits = new ButtonBar();
        textEdits.dataProvider = images;
        textEdits.id = "textEdits";
        textEdits.x = myTextarea.x;
        textEdits.y = myTextarea.y - 20;
        textEdits.includeInLayout = true;
        textEdits.visible = true;
        textEdits.height = 
        addChild(textEdits);

        textEdits.addEventListener(MouseEvent.MOUSE_OVER, activateButton);
        textEdits.addEventListener(MouseEvent.MOUSE_OUT, deactivateButton);
        textEdits.addEventListener(ItemClickEvent.ITEM_CLICK, handleTextEditClick);
    }

The issue we are having is the buttonbar is created just fine, but doesn't have any images. This is what we are getting:

This is what we are getting for our button bar.

Any help with this would be greatly appreciated.

Chris

Upvotes: 0

Views: 201

Answers (2)

Raja Jaganathan
Raja Jaganathan

Reputation: 36107

Try this, Also better you need to set iconField property and Your images array should be like this

images = [{icon:Image0}, {icon:Image1}, {icon:Image2}, {icon:Image3}, {icon:Image4}, {icon:Image5} , {icon:Image6}, {icon:Image7}];


textEdits.iconField = "icon";

Upvotes: 1

huang.xinghui
huang.xinghui

Reputation: 551

change the images define like this

images = [{icon: Image0}, {icon: Image1},
          {icon: Image2}, {icon: Image3},
          {icon: Image4}, {icon: Image5},
          {icon: Image6}, {icon: Image7}];

Upvotes: 0

Related Questions