在ButtonBar中使用嵌入式图像

Question

在动作脚本的按钮栏中使用嵌入图像的最佳方法是什么？我们目前有一个附加到textarea的按钮栏，一旦你选择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>

这工作正常，但是我们正在进行体系结构更改，并且正在将按钮栏从单击事件（已触发可访问mxml文件）移动到mouseover事件（完全在actionscript中处理）。因此需要将buttonbar转换为actionscript。以下是我们目前的情况：

        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);
    }

我们遇到的问题是按钮栏创建得很好，但没有任何图像。这就是我们得到的：

对此的任何帮助将不胜感激。

克里斯

Answer 1

试试这个，你还需要更好地设置iconField属性，你的图像数组应该是这样的

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


textEdits.iconField = "icon";

Answer 2

更改图像定义如下

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