Использование встроенных изображений в ButtonBar

Question

Каков наилучший способ использования встроенных изображений в панели кнопок в ActionScript? В настоящее время мы имеем следующий ButtonBar, который прилагается к текстовому полю, который виден, как только вы выберите текстовое поле:

<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> 

Это работает просто отлично, но мы собираемся через изменение архитектуры и сдвигая ButtonBar от щелчка событие (у которого есть доступ к файлу mxml) к событию mouseover (которое полностью обрабатывается в actionscript). В результате нужно преобразовать панель кнопок в 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); 
    } 

Вопрос, который мы имеем это ButtonBar создается просто отлично, но не имеет каких-либо изображений. Это то, что мы получаем:

Любая помощь с этим было бы весьма признателен.

Chris

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