icon in the list component AS3- Is it possible

[avid_body16B8]

I am wondering if there is a way to add icons in the list component.

[JoãoCésar · Accepted solution]

Hi, res.

Something like this should do the trick.

AS3 code:

import fl.data.DataProvider;
import fl.controls.List;
var icons:Vector.<Class> = new <Class>
[
     Square, // linkage name in the Library
     Circle,
     Triangle
];
var i:int;
var total:int;
var totalNewItems:uint = 10;
list.iconField = "iconSource";
list1.iconField = "iconSource";
 // replace current items
for (i = 0, total = list.dataProvider.length; i < total; i++)
     list.dataProvider.replaceItemAt({iconSource:icons[i % icons.length], label:"Item " + i}, i);
// add new items
for (i = 0; i < totalNewItems; i++)
     list1.dataProvider.addItemAt({iconSource:icons[i % icons.length], label:"Item " + i}, i);

FLA download:

animate_cc_as3_list_component.zip - Google Drive

Regards,

JC

[avid_body16B8]

JC you are amazing! This is exactly what I was looking for.

Muito obrigada.

[JoãoCésar]

De nada, res!

[avid_body16B8]

One more question. I am testing the text formatting because I want a bigger font.

For the life of me I cannot find the way to change the font size for the list box.

I can for the Combo and the button but not the list. I created a function for the combo boxes and one for the buttons so I can change the size and the color.

Also I experience a slight skewing for the icons. I am thinking it will be OK when the fonts is changed.

function reformatCombo(el, col): void {
    var myFormat1:TextFormat = new TextFormat();
    myFormat1.font = "Arial";
    myFormat1.size = 34;
    myFormat1.color = col;
    el.textField.setStyle("textFormat", myFormat1);
}
function reformatButton(el, col): void {
    var myFormat:TextFormat = new TextFormat();
    myFormat.font = "Arial";
    myFormat.size = 44;
    myFormat.color = col;
    el.setStyle("textFormat", myFormat);
}
reformatCombo(group,0x999900);
reformatCombo(group2,0x0000ff);
reformatButton(b,0x008000);

​

[avid_body16B8]

I have this for the box so I assume I am missing the target label:  el.setStyle("textFormat", myFormat3);

function reformatList(el, col): void {
    var myFormat3:TextFormat = new TextFormat();
    myFormat3.font = "Arial";
    myFormat3.size = 44;
    myFormat3.color = col;
    el.setStyle("textFormat", myFormat3);
}
reformatList(list, 0xd2b48c);

[avid_body16B8]

Never mind  I got it:

import fl.managers.StyleManager;
import flash.text.TextFormat
var myFormat:TextFormat = new TextFormat();
myFormat.font = "Arial";  // your font
myFormat.size = 28;  // your font size
list1.setRendererStyle('textFormat',myFormat);

[JoãoCésar]

I was just about to tell you.

I'm glad you found it out!

[avid_body16B8]

I suppose I will have to change the size of the icons.

[JoãoCésar]

You can pass an instance instead of a class reference to set the icons. The whole code could be like this:

import fl.data.DataProvider;
import fl.controls.List;
var icons:Vector.<Class> = new <Class>
[
    Square, // linkage name in the Library
    Circle,
    Triangle
];
var i:int;
var total:int;
var totalNewItems:uint = 10;
var icon:*;
list.iconField = "iconSource";
list1.iconField = "iconSource";
for (i = 0, total = list.dataProvider.length; i < total; i++)
{
    icon = new icons[i % icons.length]();
    icon.scaleX = 1.5;
    icon.scaleY = 1.5;
    list.dataProvider.replaceItemAt({iconSource:icon, label:"Item " + i}, i);
}
for (i = 0; i < totalNewItems; i++)
{
    icon = new icons[i % icons.length]();
    icon.alpha = 0.5;
    list1.dataProvider.addItemAt({iconSource:icon, label:"Item " + i}, i);
}

[MonoDev]

JC,

is it possible to retrive dynamically what icon("name") is added to the list component items?

I would like to retrieve that information controls graphics appereance.

[JoãoCésar]

Hi, MonoDev.

Sorry I didn't answer you the other time.

Do you want to retrieve the icone name? On click?

[MonoDev]

JC,

No worries, yes this should be retrieve on a button click. I will be using the icon name/data such as "OFF" "ON" to indicate the status of a lightbulp as an example. I will be comparing the value of the icon to matched against a graphics name. If these two match in name, then I will be manipulating the graphic.

public function retrieveLabel(e: MouseEvent): void {
//trace(e.target.name);
//list.selectedIndices = (selected);
// Here based on the item selected in a combo box and the button name I press, I set up the icons for the list component
if(_cb.selectedLabel == "FREEZE DRYING" && e.target.name == "LOADING"){

for (i = 0, total = _list.dataProvider.length; i < total; i++)

_list.dataProvider.replaceItemAt({iconSource:_fdLoadingIcons[i % _fdLoadingIcons.length], data:_fdArray[i], label:_fdArray[i]}, i);

// here I would add an event listener to check the list component icon name/data. what do you think?

_list.addEventListener(Event.ENTER_FRAME, iconData);
}

public function iconData(event:Event):void{

//lets say I have a MovieClip named "2V357"

// if an item in the _list has the name "2V357" and the icons is "ON", then I would control the MovieClip aperance.

}

[JoãoCésar]

Thanks for the info.

I'm still a bit confused.

Do you mind providing a sample FLA or another way of illustrating what you want to achieve?

Regards,

JC

[MonoDev]

JC,

I have attached a file. Bottom line is, once you click the buttons and a particular item in the list component has an "ON" and the label value matches the movieclip.data value then I want to decrease the alpha as an example.

[JoãoCésar]

Hi again, Umberto!

It seems the file wasn't attached. Can you verify this? Alternatively, you can upload your file to a file sharing service / platform like Creative Cloud, Dropbox, Google Drive, One Drive, or WeTransfer and post the link here.

[MonoDev]

Sorry JC,

Hopefully the file goes through now.

[MonoDev]

https://drive.google.com/file/d/1aH3CaHLRyA6ltV9psSX-GwjNVc-TTUOg/view?usp=sharing

[avid_body16B8]

Another question. I am always debatting this with myself.

Is it better to add the controls dynamically or in the UI? Does it make a difference in the payload, memory, etc...?

[JoãoCésar]

I can only tell you that I think that the impact on performance is the same.

To tell you the truth, I never use components so I don't know much about them. I prefer to build my own UI objects because I have more control. Also I have this impression that components are limited, heavy, and bloated.

But this is only my opinion.

Anyway, this seems to be a complete guide about components. I guess it will help you to understand them better.

https://help.adobe.com/en_US/as3/components/flash_as3_components_help.pdf

[MonoDev]

JC,

I'm need you guidance for a similar icon resolution. I can add the icons but, I need to add icons only to certain items of a list. see below at function " tracelabel".

Any guidance is greatly appreciated.

import fl.controls.*;
import flash.events.MouseEvent;
import fl.data.DataProvider;
import flash.display.MovieClip;

var list:List = new List();

var btnsArray:Array;
btnsArray = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];

//icon
var icon:MovieClip;

// buttons array data provider
list.dataProvider = new DataProvider(btnsArray);
addChild(list)
list.y = 280;
list.x = stage.stageWidth / 2 - list.width /2;

for(var b:Number = 0; b < btnsArray.length; b++){
var btn:Button = new Button();
//emptyArray.push(btn);
addChild(btn);
// btn.name = "btn_" + btnsArray[b];
btn.name = btnsArray[b];

btn.label = btnsArray[b];
btn.x = 20 + (btn.width + 20) * b;
btn.y = stage.stageHeight / 2;
btn.addEventListener(MouseEvent.CLICK, tracelabel);

}

function tracelabel(e:MouseEvent):void{

trace(e.target.name);

if(e.target.name == "ONE"){
//here If I click button label "ONE" or any other,
// I want to add icons only to the list items, "ONE", "THREE", "FIVE"

// I need to do this using an array.

}

}

[JoãoCésar]

Hi.

Do you want the user to click in a button to add an icon to the corresponding item list?

[MonoDev]

JC,

Yes, depending on the button that the user clicks, I need to add icons such as "ON" or "OFF" on certain items of the list component. However, I need to define the list items that are only getting the corresponding icon using and array. I plan to build different arrays because certain list item will indicate that item is currently "ON".

The button fuction I can write, my chanllenge is how to add icons only to certain list items using a predefine array. Another option would be how I can activate the Focus on certain list items also which I have not been able to achieve.

best,

Umberto Polanco.