Tilelist Treachery

Hello Everyone ,
I am experiencing tilelist problems. The first problem is that I have a total of 3 items in the tilelist and they all can be seen. However , only the first two are clickable. When I debug , it says that there are 2 items. No , not 0 , 1 , 2 but 0 , 1.
The second problem I have is that my image from my "data" object is acting funny. All three items have images that show up in the tilelist , however at initialization only the last one is visible. Upon clicking the tilelist the last and only visible image disappears. Here is the data for my custom renderer.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
          horizontalAlign="center" verticalAlign="middle"
          width="100" height="100" >
         <mx:Image id="theImage" width="50" height="50" source="{data.image}" />
         <mx:Label id="theLabel" text="{data.name}"/>
</mx:VBox>
Even if I embed my image , to avoid any data transfer problems , the problems remain. Any help will be greatly appreciated and as always points will be awarded.

shameless bump ...

Similar Messages

How use PHP to read image files from a folder and display them in Flex 3 tilelist.

Hello. I need help on displaying images from a folder dynamically using PHP and display it on FLEX 3 TileList. Im currently able to read the image files from the folder but i don't know how to display them in the TileList. This is my current code
PHP :
PHP Code:
<?php
//Open images directory
$imglist = '';
$dir = dir("C:\Documents and Settings\april09mpsip\My Documents\Flex Builder 3\PHPTEST\src\Assets\images");
//List files in images directory
while (($file = $dir->read()) !== false)
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
echo "filename: " . $file . "\n";
$dir->close();
?>
FLEX 3 :
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="pic.send();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.events.ItemClickEvent;
import mx.rpc.events.ResultEvent;
public var image:Object;
private function resultHandler(event:ResultEvent):void
image = (event.result);
ta1.text = String(event.result);
private function faultHandler(event:FaultEvent):void
ta1.text = "Fault Response from HTTPService call:\n ";
]]>
</mx:Script>
<mx:TileList x="31" y="22" initialize="init();" dataProvider = "{image}" width="630" height="149"/>
<mx:String id="phpPicture">http://localhost/php/Picture.php</mx:String>
<mx:HTTPService id="pic" url="{phpPicture}" method="POST"
result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
<mx:TextArea x="136" y="325" width="182" height="221" id="ta1" editable="false"/>
<mx:Label x="136" y="297" text="List of files in the folder" width="182" height="20" fontWeight="bold" fontSize="13"/>
</mx:Application>
Thanks. Need help as soon as possbile. URGENT.

i have made some changes, in the php part too, and following is the resulting code( i tried it, and found that it works.):
PHP Code:
<?php
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<root>
<images>
<?php
//Open images directory
$dir = dir("images");
//List files in images directory
while (($file = $dir->read()) !== false)
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
echo "<image>" . $file . "</image>"; // i expect you to use the relative path in $dir, not C:\..........
//$dir->close();
?>
</images>
</root>
Flex Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="callPHP();">
<mx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection();
private function callPHP():void
var hs:HTTPService = new HTTPService();
hs.url = 'Picture.php';
hs.addEventListener( ResultEvent.RESULT, resultHandler );
hs.addEventListener( FaultEvent.FAULT, faultHandler )
hs.send();
private function resultHandler( event:ResultEvent ):void
arr = event.result.root.images.image as ArrayCollection;
private function faultHandler( event:FaultEvent ):void
Alert.show( "Fault Response from HTTPService call:\n " );
]]>
</mx:Script>
<mx:TileList id="tilelist"
dataProvider="{arr}">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="images/{data}" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Application>

Get images into tilelist

Hey,
I am trying to make something that will have a list on the
left, and a tileList on the right. When a user clicks on a list
item, it changes the imageset lets call it, in the tileList. (eg.
list item 1 loads imageset1 into the tile list and so forth)
Now i have been having a few issues with this. First issue, I
am using arrays (i think) to hold the sets of images, then when the
list item passes the .data, the corosponding set is loaded. Well
for one...is that how i should be doing this?
Second issue, it seems that the images are being loaded in as
thumbnails or something...they are about 50% the size i would say
of the original, and thats just not on! i cant figure out why!,
eventually - i want 2 columns of images at full size (going to be
small banners)
I have just been trying to piece together bits from the help
file and such to make some hodge podge app, Im just learning!
so...it sort of works, the first two anyway - except as i said,
there somming through 50% the size
*sidenote* if any of you can tell from lookig at my code
(attached at the bottom) if i click on either the first or second
item it loads 4 images virtically, left aligned into the tileList
at about 50% size. and i can click back and forth between them and
it changed the images but keeps the size and the layout. if i click
the first or second one, then any of the others (with no code
attatched to them) then click back on the same one again (first or
second) 2 out of the 4 images go full sized, and they arrange
themselved 2x2...go figure? i think it may have soething to do with
the initCatalog being called twice? i dont know...help?
Cheers!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Model id="myCategories">
<categories>
<categories label="Zen" data="zen"/>
<categories label="Music" data="music"/>
<categories label="Black And White" data="black and
white"/>
<categories label="Flowers/Nature"
data="flowers/nature"/>
<categories label="Grunge" data="grunge"/>
<categories label="Animals" data="animals"/>
<categories label="Multicolored" data="multicolored"/>
<categories label="Water" data="water"/>
<categories label="Glitter/Sparkly"
data="glitter/sparkly"/>
<categories label="Fantasy" data="fantasy"/>
<categories label="Textured" data="textured"/>
<categories label="Fashion" data="fashion"/>
<categories label="Patterns" data="patterns"/>
<categories label="Animated" data="animated"/>
</categories>
</mx:Model>
<mx:Script>
<![CDATA[
[Bindable]
public var selectedItem:Object;
import mx.collections.*;
import mx.controls.Image;
private var zencatalog:ArrayCollection;
private static var zengroup:Array = [
"assets/group1/1.gif", "assets/group1/2.gif",
"assets/group1/3.gif", "assets/group1/4.gif"
private var musiccatalog:ArrayCollection;
private static var musicgroup:Array = [
"assets/group2/3.gif", "assets/group2/4.gif",
"assets/group2/2.gif", "assets/group2/1.gif"
// Initialize the HorizontalList control by setting its
dataProvider
// property to an ArrayCollection containing the items
parameter.
private function initCatalog(items:Array):void
zencatalog = new ArrayCollection(items);
musiccatalog = new ArrayCollection(items);
private function load(event:Event):void{
this.selectedItem=List(event.target).selectedItem
switch(selectedItem.data){
case 'zen':
initCatalog(zengroup)
group_List.dataProvider = zencatalog
break;
case 'music':
initCatalog(musicgroup)
group_List.dataProvider = musiccatalog
break;
]]>
</mx:Script>
<mx:Canvas left="10" top="10" right="10" bottom="10">
<mx:Panel y="0" width="31%" height="100%"
layout="absolute" left="0" id="categoryview">
<mx:List id="source" height="100%" width="100%"
dataProvider="{myCategories.categories}" change="load(event)"/>
</mx:Panel>
<mx:Panel y="0" width="68%" height="100%"
layout="absolute" right="0" title="{group_List.selectedItem.data}"
id="catalogview">
<mx:TileList right="0" left="0" top="0" bottom="0"
itemRenderer="mx.controls.Image" id="group_List"
direction="vertical" columnCount="2"/>
</mx:Panel>
</mx:Canvas>
</mx:Application>

With PSE off can you select and move the images, say to another folder or print them? If you can't , it may be some other program is interferring, such as your anti-virus. But, still why would some images select and others not? The images could be corrupt in some way. If you could move the folder to a memory card or CD and load them into another computer, running XP or something, and see if you could select them then.
I don't know how they would behave in PSE. I'm still trying to make sense out of the thing. I had to read the PDF manual before I could figure out how to move images from the Organizer to the Editor. Seems like there is too much emphasis on organization and not enough on editing.
I have found Win 7 to behave strangely, anyway.
Have you done a Google search for the problem? There seems to be a lot of people having trouble with PSE8
Scroll down and read the comments at JohnB1941 at Files not saved in organizer or version set. They are talking about PSE9, but the comments may apply to your problem. It seems as re-naming is creating some problems with working with the images.

Image content not defined in TileList

I have two images on a canvas, one is directly on the canvas using inline code, the other is embedded in a tilelist. Both images render. When I click and drag the inline image, the drag proxy appears normally. When I click and drag the image in the tile list, I get an error when I try to make a copy of the bitmap. This is occurring because the content of the image in the tile list is NULL, even though the source value is correct and the image has been loaded. I'm assuming this is some sort of itemRenderer issue, but I'm not clear on how it retains the source of the image, but not the content. If it's duplicating the image and referencing another bitmap, how do I access that bitmap?
The code is below with the exception of the image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.managers.DragManager;
        import mx.core.DragSource;
        [Bindable] private var images:ArrayCollection=new ArrayCollection;
            private function init():void{
                i.source="images/1.png"; //set image source that is placed directly on canvas, this image has a drag proxy
                var i2:Image=new Image; //create new image to be added into tile list, this image does not have a valid drag proxy because content is missing
                i2.source="images/1.png";
                images.addItem(i2);
            private function mouseMoveHandlerTileList(event:MouseEvent):void
                var tl:TileList=TileList(event.currentTarget);
                var image:Image=tl.selectedItem as Image;
                if (image){
                    //Here the image contains the correct source, but no content.
                    initiateDrag(event, image);
            private function mouseMoveHandlerImage(event:MouseEvent):void
                var image:Image=Image(event.currentTarget);
                if (image){
                  //Here the image does contain content
                    initiateDrag(event, image);
            private function initiateDrag(event:MouseEvent, image:Image):void{
                    var dragInitiator:Image=image;
                    var ds:DragSource = new DragSource();
                    ds.addData(image, "item");
                    var dragProxy:Image = new Image;
                    var data:BitmapData=Bitmap(image.content).bitmapData.clone(); //image.content is not null for imageon canvas, but is null for image in tile list
                    dragProxy.source=new Bitmap(data);
                    DragManager.doDrag(dragInitiator, ds, event, dragProxy);
    ]]>
</mx:Script>
    <mx:Canvas id="c" width="100%" height="100%">
        <mx:Image id="i" mouseMove="mouseMoveHandlerImage(event)" x="400" y="400"/>
        <mx:TileList id="t" dataProvider="{images}" mouseMove="mouseMoveHandlerTileList(event)"
            x="0" y="0"
            >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image source="{data.source}"/>
                </mx:Component>
            </mx:itemRenderer>
            </mx:TileList>
    </mx:Canvas>
</mx:Application>

If this post answered your question or helped, please mark it as such.
Accessing items in containers when renders are used can be problematic, because Flex recycles the items for large data sets.
So this code works fine but uses a Repeater. You may have to do some thinking to rework your concept, but this works:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      [Bindable] private var images:ArrayCollection=new ArrayCollection([
        "assets/images/BobSmith.jpg"
      private function mouseMoveHandlerTileList(event:MouseEvent):void {
        var image:Image=Image(event.currentTarget);
        if (image){
          initiateDrag(event, image);
      private function mouseMoveHandlerImage(event:MouseEvent):void {
        var image:Image=Image(event.currentTarget);
        if (image){
          initiateDrag(event, image);
      private function initiateDrag(event:MouseEvent, image:Image):void{
        var dragInitiator:Image=image;
        var ds:DragSource = new DragSource();
        ds.addData(image, "item");
        var dragProxy:Image = new Image;
        var data:BitmapData=Bitmap(image.content).bitmapData.clone(); //image.content is not null for imageon canvas, but is null for image in tile list
        dragProxy.source=new Bitmap(data);
        DragManager.doDrag(dragInitiator, ds, event, dragProxy);
    ]]>
</mx:Script>
<mx:HBox>
    <mx:Canvas id="canvas" width="400" height="600" borderColor="0x000000" borderStyle="solid" borderThickness="3">
      <mx:Repeater id="rp" dataProvider="{images}">
        <mx:Image id="img" source="{rp.currentItem}" mouseMove="mouseMoveHandlerTileList(event)"/>
      </mx:Repeater>
    </mx:Canvas>
    <mx:Image id="i" mouseMove="mouseMoveHandlerImage(event)" source="assets/images/BobSmith.jpg"/>
</mx:HBox>
</mx:Application>

How to get the number of elements in a tilelist

I'm writing test cases for a flex application using FlexSelenium and I need to get the number of elements displayed in the tilelist.
I know that that the tilelist is fed by an array. but i can't access that array from my test case.
Can anyone tell me how I can get the number of elements in a tilelist on the application? which property of the tilelist can provide that number?

try tileList.dataProvider.length;

How to populate a tilelist via my remote xml file?

I have a mysql database set up and have produced it's contents into an xml format via php. Here is the xml data:-
http://www.coolvisiontest.com/getcategories.php
In my app I've set up a http request pointing to this url but I now need to assign this as the data provider of my tilelist so that the categorynames are displayed within the tilelist. How do I edit the dataprovider of the tilelist to show this?
Here's my code:-
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService id="getProductCategories" url="http://www.coolvisiontest.com/getcategories.php" useProxy="false"/>
<mx:TileList dataProvider="{getProductCategories}" x="137" y="84"/>
</mx:Application>

I have a mysql database set up and have produced it's contents into an xml format via php. Here is the xml data:-
http://www.coolvisiontest.com/getcategories.php
In my app I've set up a http request pointing to this url but I now need to assign this as the data provider of my tilelist so that the categorynames are displayed within the tilelist. How do I edit the dataprovider of the tilelist to show this?
Here's my code:-
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService id="getProductCategories" url="http://www.coolvisiontest.com/getcategories.php" useProxy="false"/>
<mx:TileList dataProvider="{getProductCategories}" x="137" y="84"/>
</mx:Application>

Problem with getting specific canvas's to display within a viewstack based on button's clicked within a tilelist

In a new application I'm creating I've managed to set it up so that a user can add up to 5 'user profile buttons' by clicking an 'add item' button and remove each one by clicking an 'remove item' when they are selected.
That part works fine, however once each button is clicked it should bring up a specific canvas view within the viewstack relevant to that particular button i.e. when a user clicks the 'New Profile 1' button the 'New Profile 1' Canvas view should then be displayed in the viewstack, when they click 'New Profile 2' it should display 'New Profile 2' canvas in the viewstack etc but I am having trouble linking each specific button to 1 specific Viewstack canvas.
The problem is if, for example, I click the 'New Profile 2' button the 'New Profile 2' canvas IS displayed in the viewstack however if I then delete the selected 'New Profile 2' button the 'New Profile 3' button slides left into it's place but now clicking on New Profile 3 brings up the new profile 2 canvas whereas it should actually bring up the new profile 3 canvas at all times.
Eventually these canvas's will be personal areas for specific users so it is important that each button in the tilelist links to that specific user but it is also important that a user can add/delete each button at all times.
I've already had the first part of this problem (which was linking the tilelist to the viewstack) more or less answered but I clicked Correct answer rather than helpful answer in my previous thread. My mistake, sorry. Is ther a better way to do this application. Heres my code so far:-
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#545351, #E3DFDF]">
<mx:Script>
<![CDATA[
import mx.managers.*;
private var _dragManager:DragManager;
private var _historyManager:HistoryManager;
private var _popupManager:PopUpManager;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.URLVariables;
import mx.events.ListEvent;
import mx.controls.Button;
import mx.collections.*;
import mx.controls.Alert;]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.effects.easing.Elastic;
import mx.collections.ArrayCollection;
Bindable]
private var myDP:ArrayCollection = new ArrayCollection();
private var dpArr:Array = [{label:"New Profile 1", data:View1},{label:"New Profile 2", data:View2}, {label:"New Profile 3", data:View3},{label:"New Profile 4", data:View4}, {label:"New Profile 5", data:View5}];
private var addedIndices:ArrayCollection = new ArrayCollection();
private function deleteItem():void {
if(myDP.length > 0){
for each(var i:int in tlist0.selectedIndices)myDP.removeItemAt(i);
private function addItem():void {
if(myDP.length < dpArr.length && addedIndices.length < dpArr.length){
for(var a:uint = 0; a < dpArr.length; a++){
if(!addedIndices.contains(a) && !myDP.contains(dpArr[a])){myDP.addItemAt(dpArr[a],myDP.length);
break;}
private function tileList_itemClick(event:ListEvent):void {
private function showAlert(event:ListEvent):void{ Alert.show(
"You clicked button #"+event.currentTarget.selectedItem.data);}
]]>
</mx:Script>
<mx:Sequence id="itemsChangeEffect1">
<mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/>
<mx:Parallel>
<mx:Move duration="750" easingFunction="{Elastic.easeOut}" perElementOffset="20"/>
<mx:RemoveItemAction startDelay="400" filter="removeItem"/>
<mx:AddItemAction startDelay="400" filter="addItem"/>
<mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>
</mx:Parallel>
</mx:Sequence>
<mx:Canvas width="1168" height="716" backgroundColor="#0219FB" horizontalCenter="0" verticalCenter="0" borderColor="#000000" borderStyle="solid" borderThickness="1" cornerRadius="20" backgroundAlpha="0.8">
<mx:Canvas id="UserArea" left="10" x="0" y="49" width="670" height="594" backgroundColor="#000000" cornerRadius="20" borderStyle="solid">
<mx:TileList id="tlist0" itemClick="myViewStack.selectedIndex=tlist0.selectedIndex" itemRenderer="mx.controls.Button" top="10" left="10" right="10" color="#FFFFFF" height="50" width="100%" fontSize="12" fontStyle="bold" columnCount="5" rowCount="2" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}" backgroundColor="#000000" fontWeight="bold" borderStyle="none"/>
<mx:Canvas x="63" y="129" width="200" height="200" fontSize="36" borderColor="#FFFFFF" id="Canvas1" visible="false">
<mx:Label x="27" y="25" text="Profile 1"/>
</mx:Canvas>
<mx:ViewStack x="115" y="88" id="myViewStack" width="382" height="317" backgroundColor="#F90C0C">
<mx:Canvas id="View1" label="View 1" width="100%" height="100%" backgroundColor="#0FDDE5">
<mx:Label x="10" y="10" text="NEW PROFILE 1" fontWeight="bold" fontSize="15"/>
</mx:Canvas>
<mx:Canvas id="View2" label="View 2" width="100%" height="100%" backgroundColor="#A90BCB">
<mx:Label x="10" y="10" text="NEW PROFILE 2" fontWeight="bold" fontSize="15"/>
</mx:Canvas>
<mx:Canvas id="View3" label="View 3" width="100%" height="100%" backgroundColor="#E6E413">
<mx:Label x="10" y="10" text="NEW PROFILE 3" fontWeight="bold" fontSize="15"/>
</mx:Canvas>
<mx:Canvas id="View4" label="View 4" width="100%" height="100%" backgroundColor="#F4A40A">
<mx:Label x="10" y="10" text="NEW PROFILE 4" fontWeight="bold" fontSize="15"/>
</mx:Canvas>
<mx:Canvas id="View5" label="View 5" width="100%" height="100%" backgroundColor="#0D1DFA">
<mx:Label x="10" y="10" text="NEW PROFILE 5" fontWeight="bold" fontSize="15" color="#FFFFFF"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Canvas>
<mx:Button label="Remove item" click="deleteItem();" color="0x323232" x="96" y="10"/>
<mx:Button label="Add item" click="addItem();" color="0x323232" x="10" y="10"/>
</mx:Canvas>
</mx:Application>

Hi
Try this if it works..
1. In MultiProvider identify those key figure from both the InfoProvider ( DSOs)
2. In BEx create KF1 . Restrict with 0INFOPROV = DSO1 ( Billing) , hide it
3. Create KF2 . Restrict with 0INFOPROV = Cube ( condition cube) , hide it
3. Create a Fomula Key Figure 3 with the definition
KF3 = KF1 + KF2* ( KF1==0)
If KF1 is zero, then KF1 == 0 will be true and it will return value 1. So, basically you would get
KF3 = 0 + KF2 *1 = KF2
When KF1 is non-zero, expression KF1== 0 will be false and gives a value 0. Let;s say KF1 =5 , then
KF3 = 5 + KF2 * 0 = 5
Now show KF3 in the report
Regards
Anindya

How to enable a button only when a tilelist item is selected

Simple question but it seems quite awkward to me. How do I enable a button only when an item within a tilelist is currently selected?
For example lets say if I have a button called button1 that is disabled by default and a tilelist called tilelist1 what would I have to add into the brackets of the following code (enabled property of the button) to ensure that the button is only enabled when an item in the tilelist is currently selected but disabled when no items are selected:-
enabled="{}"

enabled="{tilelist1.selectedItem}"
that should do it, it's making an implicit comparision with null (tilelist1.selectedItem == null) which will result in a boolean.
SelectedItem is null when nothing is selected , not null when something is.

How to create "moveUp" and "moveDown" functionality for items in a TileList

I want to create "Move Up" and "Move Down" buttons for items in a TileList. They should have the same functionality as if they were dragged and dropped, except only moving one position up or down (and thus switch places with the item above/below). I have tried this using this code for the moveUp button:
private function moveItemUp(){
     var moveFromPos:Number = myTileList.selectedIndex;
     if(myTileList.selectedIndex > 0){
          var moveToPos:Number = myTileList.selectedIndex-1;
          var tempItem:Item = myTileListDataProvider.removeItemAt(moveFromPos);
          myTileListDataProvider.addItemAt(tempItem, moveToPos);
                trace("New selected Index: "+ moveFromPos - 1);
                myTileList.selectedIndex = moveFromPos - 1;
                trace("New selected Index: "+ myTileList.selectedIndex);
But my problem is that the selectedIndex of myTileList isn't correctly set. For instance; if I have a list of three items and I move the last item up this is what happens:
1. Item three (selectedindex is 2) switches places with Item two (So far, so good)
2. Item two is shown in GUI as selected (has Halo around it - so far, so good)
3. If i click "MoveUp" again, the same two (item three and two) switces places, instead of the intended item two and one.
The traces tell me that myTileList.selectedIndex variable isn't set correctly as the trace shows this:
New selected Index: 1
New selected Index: 2
Any idea on how to solve this problem?

I found a partial solution at http://www.ultrashock.com/forums/flex/tilelist-selected-element-removed-124313.html and modified it a bit. The answer was using the callLater() method as in this example:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="vertical">
<mx:Script>
<![CDATA[
      import mx.events.FlexEvent;
      import mx.collections.ArrayCollection;
      var arr:ArrayCollection = new ArrayCollection();
      var temp:Number;
      var temp2:String;
      private function initApp():void{
          arr.addItem("A");
          arr.addItem("B");
          arr.addItem("C");
          arr.addItem("D");
          arr.addItem("E");
          arr.addItem("F");
      public function traceEvent(event:FlexEvent):void{
          trace(event);
          trace(mtl.selectedIndex);
          if(mtl.selectedIndex==-1){
              callLater(setInd);
      private function setInd():void{
          trace("Changing selected index..");
          mtl.selectedIndex = temp;
      public function removeItem():void{
            temp = mtl.selectedIndex - 1;
            temp2 = arr.removeItemAt(mtl.selectedIndex) as String;
            arr.addItemAt(temp2,temp);
      public function notifyChange(e:Event):void{
          trace("CH mtl.selectedIndex:" + mtl.selectedIndex);
]]>
</mx:Script>
<mx:TileList id="mtl" width="100" height="200" dataProvider="{arr}" columnCount="1" change="notifyChange(event)" updateComplete="traceEvent(event)"/>
<mx:Button id="mbt" label="delete" click="removeItem()"/>
</mx:WindowedApplication>

Problem in tilelist with dataprovider.

I have a problem in tilelist. with the dataprovider a get the
message error
ArgumentError: Error #2025: The supplied DisplayObject must
be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
if i delete the images from the last added to the first one i
have no prob but if i want to delete from the middle i get the
message error th sode that i use is
<mx:TileList id="tileList"
dataProvider="{imgData}"
columnCount="4"
columnWidth="222"
rowCount="2"
rowHeight="194"
themeColor="haloSilver"
verticalScrollPolicy="on"
x="0" y="415" width="100%">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center"
verticalAlign="middle" width="222" height="194"
verticalScrollPolicy="off" horizontalScrollPolicy="off" >
<mx:Image id="img" width="165" height="126"
maintainAspectRatio="true" source="{data.asset}" />
<mx:Label id="txt" text="{data.title}"/>
<mx:Button id="del" label="Delete"
click="outerDocument.deleteSnapShot(event)"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
the function to add the image is :
public function addImgToTile(bm:Bitmap):void{
var bm1:BitmapData = Bitmap(bm1_source.content).bitmapData;
var bitmap:Bitmap = new Bitmap(bm1);
var vo:MyVOBm = new
MyVOBm(bitmap,formatTime(inStream.time));
imgData.addItem(vo);
And the function to delete the image is:
public function deleteSnapShot(ev:Event):void{
imgData.removeItemAt(tileList.selectedIndex);
tx for your help

tx Amy for your help here i give you the code that generate
the image from streaming video
<mx:Canvas id="videoHBox" horizontalScrollPolicy="off"
verticalScrollPolicy="off" backgroundColor="#000000" width="456"
height="284" y="37">
</mx:Canvas>
<mx:Button x="464" y="188" label="In" width="48"
id="btnIn" click="addStart(inStream.time);" enabled="true"
visible="true" useHandCursor="true" buttonMode="true" toolTip="Add
Start Image (shotcut Home)"/>
<mx:Button id="Btn_add_action" x="464" y="221" label="Add
Screenshot" click="addImgToTile(bm1)" useHandCursor="true"
buttonMode="true" toolTip="Add Clip (shotcut insert)"/>
<mx:TileList id="tileList"
dataProvider="{imgData}"
columnCount="4"
columnWidth="222"
rowCount="2"
rowHeight="194"
themeColor="haloSilver"
verticalScrollPolicy="on"
x="0" y="415" width="100%">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center"
verticalAlign="middle" width="222" height="194"
verticalScrollPolicy="off" horizontalScrollPolicy="off" >
<mx:Image id="img" width="165" height="126"
maintainAspectRatio="true" source="{data.asset}" />
<mx:Label id="txt" text="{data.title}"/>
<mx:Button id="del" label="Delete"
click="outerDocument.deleteSnapShot(event)"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
variable:
private var videoHolder:UIComponent = new UIComponent();
[Bindable] public var imgData:ArrayCollection = new
ArrayCollection();
init :
nc = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR,
netSecurityError);
nc.connect(Srv_Name);
videoHolder.setActualSize(Playing_Video_width,
Playing_Video_height);
Playing_Video = new Video(Playing_Video_width,
Playing_Video_height);
videoHolder.addChild(Playing_Video);
Playing_Video.x = 0;
Playing_Video.y = 0;
videoHBox.width = Playing_Video.width;
videoHBox.height = Playing_Video.height;
videoHBox.addChild(videoHolder);
functions:
public function addStart(timecode:Number):void{
var bm:Bitmap = copyBitmap(videoHBox as
UIComponent,timecode,"start");
bm1 = bm;
img_start_time.text = formatTime(timecode);
start_time = timecode;
public function addImgToTile(bm:Bitmap):void{
var bm1:BitmapData = Bitmap(bm1_source.content).bitmapData;
var bitmap:Bitmap = new Bitmap(bm1);
var vo:MyVOBm = new
MyVOBm(bitmap,formatTime(inStream.time));
imgData.addItem(vo);
private function
copyBitmap(source:UIComponent,timecode:Number,origin:String=''):Bitmap
try{
var bmd:BitmapData = new BitmapData( source.width,
source.height );
bmd.draw(source);
corectImg = false;
catch (err:Error){
this.setFocus();
inStream.seek(timecode);
if (origin == "start") setTimeout(addStart,750,timecode);
return new Bitmap(bmd);
public function deleteSnapShot(ev:Event):void{
imgData.list.removeItemAt(tileList.selectedIndex);
and the MyVOBm class is :
package components
import flash.display.Bitmap;
[Bindable]
public class MyVOBm
private var _asset:Bitmap;
private var _title:String;
public function MyVOBm(asset:Bitmap, title:String)
this.title=title;
this.asset=asset;
public function set title(title:String):void{
_title=title;
public function get title():String{
return _title;
public function set asset(asset:Bitmap):void{
_asset=asset;
public function get asset():Bitmap{
return _asset;

Trouble with parallel add and remove effect in TileList

We have a TileList of images. As the user drags a new image along the list (deciding where to drop it) a blank frame drops in to show them where it will be inserted when they drop it. Therefore, I have to add and remove simultaneously, while still dragging. For example if they are at index zero, a blank frame is in index zero. As they move to 1, the blank frame appears to move from index zero, to index one, as the image that was at index one appears to move to index zero. But what I'm really doing is just removing and then adding the blank frame.
I think the following code should accomplish this. And it works, most of the time. Every so often, there is a delay where is does the REMOVE, and then waits until the Back.easeOut tween is complete, and then does the ADD.   It is intermittent. Any ideas, or is there a better way to do it? Thanks
MXML code:
    <mx:Sequence id="myEffect">
        <mx:Parallel>
            <mx:Move
                duration="600"
                easingFunction="{Back.easeOut}"
                />
            <mx:RemoveItemAction id="dcmRemoveItemActionTag"
                                 />
            <mx:AddItemAction id="dcmAddItemActionTag"
                               />
        </mx:Parallel>
    </mx:Sequence>
actionscript code:
                _sharedMedia.removeItemAt(_sharedMedia.getItemIndex(_dropPlaceHolderimage));
                _sharedMedia.addItemAt(_dropPlaceHolderimage,dropIndex);

hi,
You could do this a couple of ways, you could have a slight delay set on the remove effect so that it doesn't interfere with the ease function.
or
You could add the item instead of an empty frame, on the dragdrop event you don't need to do anything if you get a dragexit triggered then you simply remove the item completely.
David

SetItemAt Not Updating Tilelist Icons Correctly

My app allows users to enter in a url a title and an image filename and then when they click a button a snapshot of this url is created and sent to the server as the filename they have entered and an item containing all this data is added to an array collection which displays all this within a tilelist, the item renderer is linked to the server which contains the images (via the i) so they are displayed within the tilelist. The thing is this I'm trying to allow my users to update these things using the setitemat method i.e. they click on an item and all it's data is displayed and they can edit it and then save it which will use the setitemat function to update this item in the array collection.
My problem is this, if the user changes the url it takes a snapshot of this new url to overwrite the previous image on the server but if they keep the image filename the same it doesn't seem to refresh within the tilelist itself. I know the image on the server has been overwritten as the image on the server in question has been changed when I check it but for some reason the image in the tilelist isn't updating to the new image. It's as if flex has the old image stored in memory or something and won't switch to the new one. Is this common and is there anyway around this besides refreshing the whole array collection each time the user updates an item. Is there any way of refreshing only the item that has just been updated perhaps? The strange thing is if the user enters a different image filename.
Here's the line of code which updates the selected item (with 'a' being the chosen item in the tilelist):-
ArrayCollection(linkChoice.dataProvider).setItemAt({linkid:linkChoice.selectedItem.linkid, categoryid:updatedcategoryid, label:updatedlabelentry.text, icon:updatediconentry.text, url:updatedurlentry.text}, a);

Yes but that's the thing. People can't enter a fake url because the process all takes place right in front of them and shows the site they are about to take a snapshot of. Plus I've tested it myself and looked on the server and the images are there and can be linked to elsewhere but it just seems that the tilelist images aren't updating to that new image when the user enters a filename which is the same as the current one. It's almost like having the same filename is confusing flex and making the tilelist still display an image that is now different and has been overwritten.
All my data is dynamic and is loaded at startup into the tilelist array collection data provider and then the user can edit it. My tilelist has an item renderer containing an image the code for which is this:-
<mx:Image source="{'http://www.mysitename.com/images/'+data.icon+'.jpg'}" height="100" width="100"/>
And obviously the user can rename the icon property as the place on my site where the new image gets uploaded to but if they keep the name the same the image doesn't refresh. If they edit the name then it does change correctly once it's been added I've been racking my brains trying to figure it out.
The strange thing is this. I have a filter function applied to my tilelist which changes the contenrt based on what category a user selects at the top of the app. If a user selects a category and selects a link and edits the image to a different one but saves it as the same filename that it already was it doesn't show the new image in the tilelist BUT if they then click to another category that has other images in it and then go back to the category they edited the link in all of a sudden it has changed. I'm totally confused about this.

Need help with Component- TileList

Hi,
I'm trying to make a gallery using the component: TileList. Here is what I've done so far:
I've created two arrays(aTop & aBottom) to store the movie clips(mc1-mc10 & mc11-mc20 respectively) which will be shown when the corresponding drop down menu is selected. I've placed the movie clips mc1, mc2, mc3...,mc20 off the stage so that they are not visible right now. What I need is when the user selects the drop down menu, then the corresponding images(movie clips) will be shown in the TileList that I've created.
I've used the following code. Instance name for the TileList is: tlGallery & instance name for the Combo Box is cbClothes.
import flash.events.MouseEvent;
import flash.events.Event;
import fl.data.DataProvider;
import flash.display.*;
var aTop:Array = new Array(mc1,mc2,mc3,mc4,mc5,mc6,mc7,mc8,mc9,mc10);
var aBottom:Array = new Array(mc11,mc12,mc13,mc14,mc15,mc16,mc17,mc18,mc19,mc20);
function showGallery(evt:Event):void
    if (evt.target.selectedIndex == 0)
        var dpImage1:DataProvider = new DataProvider(aTop);
        tlGallery.dataProvider = dpImage1;
    else if (evt.target.selectedIndex == 1)
        var dpImage2:DataProvider = new DataProvider(aBottom);
        tlGallery.dataProvider = dpImage2;
cbClothes.addEventListener(Event.CHANGE,showGallery);
After selecting the top-down menu, I'm getting 10 placeholders in the TileList but I can't view the images(movie clips). I need to find out where I'm making the mistake. Am I following the correct procedure to load and show the TileList with the movie clips?

Flash CS3 has this Example and it should work for any version:
This example demonstrates how to create a TileList instance and dynamically populate its contents with a symbol from the library.
To run the example, follow these steps:
Add the TileList component to the library.
Draw a star and create a movie clip symbol from it named "star".
In the symbol properties for star, check the box that says "Export for ActionScript".
Save this code as TileListExample.as in the same directory as your FLA file.
Set the Document class in the FLA file to TileListExample.
package
    import fl.controls.TileList;
    import fl.data.DataProvider;
    import flash.display.Sprite;
    import flash.events.Event;
    public class TileListExample extends Sprite
        public function TileListExample() {
            var dp:DataProvider = new DataProvider();
            var totalEntries:uint = 42;
            var i:uint;
            for(i=0; i<totalEntries; i++) {
                dp.addItem( { label:"star"+i, source:star, scaleContent:false} );
            var myTileList:TileList = new TileList();
            myTileList.allowMultipleSelection = true;
            myTileList.columnWidth = 125;
            myTileList.rowHeight = 150;
            myTileList.dataProvider = dp;
            myTileList.columnCount = 3;
            myTileList.rowCount = 1;
            myTileList.move(10,10);
            addChild(myTileList);

Tilelist RowHeight and Height not working correctly

Environment: Flash CS4, AS3, Windows XP (client), Windows Server 2003/IIS6 (server)
NOTE: using the tilelist because the clickable item is pushed to an image editor class.
I'm using the standard tilelist setup from the library and creating the tilelist from Actionscript. By default, the column width is 50, though I have set the height to 110 and the width to 640. When I set rowHeight to 85 to compensate for the scrollbar, my entire tilelist becomes 85 high (though tracing the height property says that it is still 110). This causes the text labels to be hidden (unless I use a textpadding of 15, which then obscures the tiles themselves.
I have a similar problem with the width, columnWidth, and columnCount properties, as I set width to 640, columnWidth to 100 and columnCount to 6. What I get is a control that is 300 wide (as presented by the trace(loadBackground_mc.width) command).
Is the only alternative to solve this problem a custom cell renderer?
Any suggestions would be appreciated.

I found what appears to be the answer. Unlike many other controls, Tilelist settings must occur in a very particular order. You must set RowHeight and ColumnWidth, RowCount, and ColumnCount before setting the size of the control. I converted all my tilelists to load, then used a "setSize" method instead of individually setting the height and width properties of the control. These were done after defining the row/column counts and the rowheight/columnwidth.
Now, the Tilelist appears to work just as I need it. I wish there was better documentation on this requirement. I would expect that the size of the outer container would be set first and the inner containers (like the cells) would follow, but that is not the case here.

TileList does not recognize the size of vertical Scroll Bar

Hi,
I have a tileList with a custom vertical scroll bar that I made, the problem is that when the tilelist gets filled, it does not recognize that the vertical scroll bar width is not the default 16 pixels (I think the default value it's 16, but I'm not really sure) but 5 or 6 pixels, so the first time it gets filled it shows 3 columns of items (no problems with the rows). The columnWidth is set to 185, if I lower it to 180, it shows the 4 columns that I want it to show (instead of 3). I know that there is enough space because when I scroll down, and then scroll up, the fourth column appears. That's why I think that the TileList is not recognizing that the width of the vertical scroll Bar is less than the default width.
Does anybody know how to make it recognize the new width? And how is it that it has to take a scroll down to get it to recognize it.
Thank you for your help.
Sebasti'an Toro O.

Yeah, you can try signing up for DropBox - it's a free service that allows you to sync any files between your iPhone and your computer. More info here: http://www.dropbox.com/about

Tilelist Treachery

Similar Messages

Maybe you are looking for