TileList or Tile or?
Hi,
I am trying to build a home section of an application that
will have numerous panels with summary information. I would like to
let the user rearrange the panels to what ever order they would
like, sort of customized, and then keep track of the order when the
log into the app again. Sort of how Google and other sites let you
move components around on the iGoogle pages.
I have tried using the Tile component but can not quite
figure out the drag and drop syntax to move panels around.
Should I use the Tile component or perhaps the TileList
component?
I am thinking that the panels would eventually be custom
components but for now I would just like to figure out the drag and
drop syntax.
Is there an easier way to do this?
I have been writing apps for a while now but and pretty new
to Flex so please forgive me if this is simple question. Sometimes
we just need a swift kick to get started.
Thank you very much in advance.
Ed
no one?
Similar Messages
-
Apply different styles to TileList Renderer
Hi guys,
I created a TileList:
<mx:TileList
id="tile"
dragEnabled="true"
dropEnabled="false"
allowMultipleSelection="true"
itemRenderer="CamCanvas"
dataProvider="{model.pictures}"/>
and I created my own itemRender="CamCanvas":
which is just a simple Canvas component. What I would like to
do is to set a border/padding between elements in the TileList.
By default they are next to each other. Do you know any way
to do that?Jeff,
Apply Oracle Portal styles at the region level. Your portlets within each region will inherit the style defined for the region.
You may want to check out Report #40050 at portalcenter.oracle.com, "Design an Attractive and Compelling Portal Interface" for a good overview of the various design features of Oracle Portal.
Here is the link:
http://portalcenter.oracle.com/pls/ops/docs/FOLDER/COMMUNITY/OTN_CONTENT/MAINPAGE/OWSF_2003_PAPERS/40050_STOVER.PDF
Regards,
Jay -
Tilelist buffering / caching / setting up next tile not on stage?
I've created a tilelist and attached a listener to the Event.ADDED and Event.REMOVED to it, so that I can be notified when a row within it gets added and removed, for visual effect. The problem is that the tilelist seems to buffer rows / columns in view + 1. This breaks the entire system. I've a sample fla file which has the following code in,
import example.testrow;
function setup():void {
for(var i:uint = 0; i < 6; i++) {
var row:testrow = new testrow();
setColour(row, colours[i % 3]);
row.listIndex = i;
myList.addEventListener(Event.ADDED, onAddRemove);
myList.addEventListener(Event.REMOVED, onAddRemove);
myList.addItem({source: row});
function onAddRemove(event:Event):void {
if(event.target is testrow) {
trace(event.target.listIndex + ' ' + event.type);
function setColour(row:MovieClip, colour:uint):void {
var tempCT:ColorTransform = row.transform.colorTransform;
tempCT.color = colour;
row.transform.colorTransform = tempCT;
myList.setStyle('skin', new Shape());
myList.setRendererStyle('imagePadding', 0);
var colours:Array = [0xFF0000, 0x00FF00, 0x0000FF];
setup();
This adds 6 new 'testrows' (simple movieclip containing a rectangle shape), then sets up the listeners as I've described, while also adding a 'listIndex' property to each row and changing their colour, and also clearing all style from the TileList, so you can see clearly what's in it. The TileList is set up very simply, with a rowCount of 3 and is vertical.
Below can be seen by using the thumb scroller of the scrollbar, but is much clearer when using the up & down buttons.
The problem can be seen straight away, because while only 3 should be shown, I get a trace statement from 0 to 3, ie 4 rows. If at any stage you scroll down, it'll always be one step ahead of you, no matter how hard you try!
I can't imagine this is the proper way it is supposed to work, with this sort of ambiguous, inconsistent lookahead. I mean, the way it works differs completely from being at the start of the list to being at the end. If you scroll from 0 position, to position 1, you'll get the notification '0 removed' and '4 added', 0 should have been removed, but again 4 shouldn't be added yet, it's not displayed. If you go to the end of the list and go from position 5, to position 4, you'll see that the behaviour is totally different, No notifications at all. This shows that flash is keeping the next item cached, or whatever, as if it's on stage, without being on stage any time it can do.
This is very frustrating as I have been wanting a nice way to track what gets is on and off a tilelist and every other way has been just as frustrating, whereas I thought this would do it. I initially thought it was just oddities with the sizing of the tilelist and the rows, but that's clearly not the case. Is there *any* way to stop, or change this behaviour and have the tilelist add *only* the rows that are shown in the tilelist, rather than those rows, plus the next one? It really doesn't seem like the best of behaviours.
http://seadersforums.appspot.com/static/tilelist_buffer.fla1024x768 is 4x3. 2048x1536 is 4x3. Both of these are current display dimensions for iPads 1-3.
HD video (1920x1080 or 1280x720) is a 16x9 aspect ratio.
Try putting a rectangle in a square. Unless you scale the retangle up and lose image on the sides you will not be able to properly fill the entire 4x3 display area. The easy compromise is letterboxing to ensure all of the rectangle is display in the square. The iPad is doing this with very little effort on your part.
In FC you can create a new sequence and go into the settings and customize it to 1024x768, 2048x1536 or
just about any other dimension. Even If you create a custom sequence at 1024 or 2048 in FC you will see the same results that the iPad is giving you with much less effort, render and conversion time (presuming your keynote workspace cannot change in dimensions or aspect ratio and you are unwilling to crop your 16x9 aspect ratio video to fill the space.) -
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> -
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. -
I need s:list display 2 colums item, like mx:tilelist.
RT,
How can I do, I need 2 colums item, I write itemrenderer, set some properties, but it's not work.
I want s:list like mx:tilelist.
Please help me.
code is here:
c2.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:CurrencyFormatter id="currFormatter" precision="2" />
</fx:Declarations>
<s:layout><s:BasicLayout /></s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var myar:ArrayCollection = new ArrayCollection(
[{name:"The", price:"0.23"},
{name:"quick", price:"1.03"},
{name:"brown", price:"0.98"},
{name:"fox", price:"1.19"},
{name:"jumps", price:"0.28"},
{name:"over", price:"0.42"},
{name:"the", price:"0.09"},
{name:"lazy", price:"0.81"},
{name:"dog", price:"0.72"}]
private function comboBox_labelFunc(item:Object):String {
return item.name + "\t" + currFormatter.format(item.price);
]]>
</fx:Script>
<s:List id="comboBox"
itemRenderer="TabItemRenderer"
horizontalCenter="-157"
verticalCenter="-124"
width="250"
height="500"
dataProvider="{myar}"
>
</s:List>
</s:Application>
tabItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:fxg="http://ns.adobe.com/fxg/2009">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout><s:BasicLayout /></s:layout>
<mx:Tile direction="horizontal" autoLayout="true" tileWidth="100" tileHeight="50" horizontalGap="0" >
<s:Button label="{data.name}" width="100%" height="100%" />
</mx:Tile>
</s:ItemRenderer>
this only one colum.
please!!!!I know it.
in c2.mxml change to:
<s:List id="comboBox"
itemRenderer="TabItemRenderer"
horizontalCenter="-157"
verticalCenter="-124"
width="250"
height="500"
dataProvider="{myar}"
>
<s:layout>
<s:TileLayout requestedColumnCount="2" />
</s:layout>
</s:List>
add s:layout here.
and tabItemRenderer.mxml, delete mx:Tile.
set s:TileLayout requestedColumnCount = 2.
and ,it's working. -
Images in Tilelist not actual size
I am pulling urls from my database and having them and a
small caption populate a tilelist. The images vary in size and I am
wanting them to show up their actual size and will have 1 row in
the TileList and just scroll horizontally to view the images
inline.
However, when I use my custom itemrenderer I cannot seem to
get it to appear actual size, instead it creates scrollbars and a
fixed size as you can see in the photo below.
Example
Any help with either situation is appreciated.
Here is some relevant code
// Custom Renderer
<?xml version="1.0" ?>
<!-- Custom Renderer -->
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Image id="image" source="{data.source}" />
<mx:Label text="{data.name}" y="275" fontSize="16"
horizontalCenter="0"/>
</mx:Canvas>
//// Tile List
<mx:TileList
dataProvider="{photoList.lastResult.images.image}"
itemRenderer="Thumbnail" y="41" x="0" width="100%" height="90%"
variableRowHeight="true"></mx:TileList>Thanks, but that's not it I'm afraid. Here's what I mean. The image on the right is the actual size, as opened up in a web page. The image on the left is how Preview displays it when the file is opened. And hitting ⌘-0 doesn't change the size, only zooming does.
-
How to address relative cell in TileList during drag-and-drop processing
Is there a way to address the tile cell being dropped onto
during the dragDrop function processing?
private function myDragDrop(e:DragEvent):void {
// e.whatthe#*&$
<mx:TileList id="tilelist1" rowCount="9" columnCount="9"
dragDrop="myDragDrop(event);" dataProvider="{anyOldAC}"/>
If I'm dropping an object on the 3rd row and 5th column, I'd
like to be able to manipulate the15th entry in the dataProvider
without having to figure out the cell number from the component
geometry and mouseX/mouseY. Using component geometries just seems
WAY too brittle.Got the answer from Joan Lafferty on the FlexCoders forum:
Use calculateDropIndex(event:DragEvent) that is a function
for a TileList. In will return the index where the item was
dropped.
And that works:
private function myDragDrop(e:DragEvent):void {
var dropIndex:int = tilelist1.calculateDropIndex(e);
Alert.show("dropIndex: " + dropIndex);
Thanks Joan! -
TileList Add/Remove function problems for a flex beginner
I am starting up a new project for my university course which will allow users to drag and drop icons into their own area.
I wanted to use a TileList to provide the buttons for the users to select their area i.e. when a user clicks on a button in the TileList their area will be shown then they can drag items into it from another area that will always be shown (these items will later act as links to websites effectively making this application an interactive favourites menu but I'm nowhere near that point yet).
The thing is I also wanted the user's to have the ability to add a new user or remove a selected user by clicking buttons to either add a new user or click a button that will delete a selected user however after searching the internet for code and using it in my application it's a little but messed up.
The problem is I have created an array of 5 profiles (slots for each user) but I only want each slot to be added once whereas at the moment I can remove buttons easily using the remove item button when a user button is selected but if i add a few profiles then delete one and add another sometimes there will be 2 instances of the same button added. I only want ONE of each profile button from the array to be viewable in the application at any one time. It's hard for me to explain this so heres my full code for the applicattion. I'm sure it just needs slightly tweaking but if someone could edit it for me it would be greatly appreciated as I'm totally stuck:-
<?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:1},{label: "New Profile 2", data:2}, {label: "New Profile 3", data:3},{label: "New Profile 4", data:4}, {label: "New Profile 5", data:5}];
private function deleteItem():void {
// Remove item from Array Collection
if(myDP.length > 0){
var toRemove:Array = [];
for (var i:int = 0; i < tlist0.selectedItems.length; i++)
toRemove.push(tlist0.selectedItems);
for (i = 0; i < toRemove.length; i++)
myDP.removeItemAt(myDP.getItemIndex(toRemove));
private var zcount:int = 0;
private function addItem():void {
// Add item from source Array to Array Collection
if(myDP.length < dpArr.length){
myDP.addItemAt(dpArr[myDP.length],myDP.length);
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="{showAlert(event)}" 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: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>I've changed the code for the additem function to this but it only works to an extent now:-
private function addItem():void
// Add item from source Array to Array Collection
if (myDP.length < dpArr.length && !myDP.contains(dpArr[myDP.length])){
myDP.addItemAt(dpArr[myDP.length],myDP.length);
It does only allow 1 of only the 5 profiles from the array to be added to the tilelist as I wanted but it appears that it is now impossible to add buttons anymore in certain situations.
For example if i run the application add all the profile buttons so all profile buttons are shown in the tile list and then remove profile buttons 2 3 and 4 and then click the add item button 3 times buttons 2 3 and 4 should be added however only 3 and 4 appear after profile 5 and 2 doesn't appear no matter how many times I click 'add item'.
What I want is for all 5 buttons from the array to be addable at any time but only one of each number should be shown. This may be to do with other code but I'm not sure. -
I am having an issue where the data that drives a tilelist
works correctly when the tile list is not loaded on the first page
of the application. When it is put on a second page in a viewstack
then the tilelist displays correctly when you navigate to it. When
the tilelist is placed in the first page of the application I get
the correct number of items to display in the tilelist but the
information the item renderer is supposed to display, ie a picture,
caption and title, does not. The strange thing is that a Tree
populates correctly given the same situation. Here is the sequence
of events:
// get tree is that data for the tree and get groups is the
data for the tilelist
creationComplete="get_tree.send();get_groups.send();"
<mx:HTTPService showBusyCursor="true" id="get_groups"
url="[some xml doc]" resultFormat="e4x"/>
<mx:XMLListCollection id="myXMlist"
source="{get_groups.lastResult.groups}"/>
<mx:HTTPService showBusyCursor="true" id="get_tree"
url="[some xml doc]" resultFormat="e4x" />
<mx:XMLListCollection id="myTreeXMlist"
source="{get_tree.lastResult.groups}"/>
And then the data provider of the tilelist and tree are set
accordingly. I tried putting moving the data calls from the
creation complete to the initialize event thinking that it would
hit earlier in the process and be done by the time the final
completion came about but that didn't help either. I guess I'm just
at a loss as to why the tree works fine no matter where I put it
but the TileList does not. It's almost like the tree and the
tilelist will sit and wait for the data but the item renderer in
the tilelist will not wait. Which would explain why clicking on the
tile list still produces the correct sequence of events but the
visual component of the tilelist is just not working right. Anyone
have any ideas?Ok, so if ASO value is wrong, then its a data load issue and no point messing around with the BSO app. You are loading two transactions to the exact same intersection. Make sure your data load is set to aggregate values and not overwrite.
-
Two dimensional arrangement in tileList control Possible?
Hi,
Can anybody tell me, is there any possibility for arranging
image controls two dimensionally in a TileList control,so that we
could get indices for the children according to row and columns in
such a way that if we want to get the image in row 2 and column 5
and get the location? If yes, if give me an example plz..... i need
this help very urgentlyThe Tile container and TileList are designed specifically to
not give you this control - you are supposed to just toss in the
components and they appear one after the other until an edge is
reached then a new row or column is created.
If you want this type of control, use a DataGrid and
itemRenderers. That has both row and column indexes. -
I'm want to use the mx:TileList component to display the pictures in a folder. What would I put as the data provider? and what would I put in the item renderer?
Item Renderer:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="" />
<mx:Label text="" />
</mx:VBox>Hi,
Here are some links for displaying images in TileList. Hope this will help you
http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/
http://www.adobe.com/devnet/flash/quickstart/tilelist_component_as3.html
Thanks and Regards,
Pooja Kuber | [email protected] |http://www.infocepts.com -
Hi
I have made a tile list dynamically using a function and
objects.
in this images are there which are to be dragged and there
are tilelists which are made by mxml tags
in this images are to be dropped.....
but always I drag and drop the images itno Tilelist which ar
emxml originated ....shows a error in .as file throwing error
like--
ther should be XML or xmllist type...
plz help me out...ASAPHi,
the way you tried to add some more fields in a list tile is not working.
In lists the data is not retrieved from Business objects/collections but from record sets which are fetched from the main segment of the underlying query BDoc (I guess sth like OPP_blabla_QUERY).
Therefore what you could do is to enhance this query BDoc and add these tables by joining them to the opportunity header table. In this case you also need to specify exactly these segment field names in the property of the new list column fields.
Much faster (but a little bit dirty) would be to use the row loaded2 event where you can calculate the values you want to display. In this case the controls would have to be unbound.
The second version would cost a little bit more performance, but this depends from the data volume.
Regards,
Wolfhard -
I use removeAll function to clean the dataProvider then I additem to it.
There is an error occured. Because the dataProvider is null !
So I recreate the dataProvider the error still there Why ~~?
this is the code:
var i:int = 0;
if( TileList.dataProvider )
TileList.dataProvider.removeAll(); // I remove all items.
else{ // next time I try to recreate it but I still can't add item to the dataprovider
// TileList.dataProvider.addItem("Class 1"); I can't do it because the dataprovider is null now
TileList.dataProvider = new ListCollectionView( );
while( i++ < 15 ){
TileList.dataProvider.addItem("Class" + i);Hmm.. It seems that the data provider is not getting instanciated, which is resulating into null object reference error. I tried out the following code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import flash.text.engine.ContentElement;
import mx.collections.ArrayCollection;
public function btnClick():void
var i:int=0;
if (contentList.dataProvider.length > 0)
contentList.dataProvider.removeAll();
else
contentList.dataProvider=new ArrayCollection();
while (i++ < 15)
contentList.dataProvider.addItem("Class" + i);
]]>
</mx:Script>
<mx:Canvas width="100%"
height="100%">
<mx:TileList id="contentList"
visible="true"
width="50%"
height="50%"
horizontalCenter="0"
bottom="10"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
verticalAlign="middle"
maxColumns="3"
maxRows="5"
rowHeight="{contentList.height*0.20}"
columnWidth="{contentList.width*0.33}"
dataProvider="{new ArrayCollection()}">
</mx:TileList>
<mx:Button id="btn"
label="Populate Tile List"
width="{btn.label.length * 8}"
height="20"
click="btnClick()">
</mx:Button>
</mx:Canvas>
</mx:Application>
May be this will help you.
Thanks and Regards,
Pooja Kuber | [email protected] | www.infocepts.com
Maybe you are looking for
-
i have starnge issue but i think it is related to windows machines , i just want to know if any one faced it in ISE deployment. the ISE authentication logging receive the machine name(identity) as "mac address" then when ISE ask AD
-
How do I get rid of these rough unfinished lines at the top?
Hi I tried to attach this image in an ai file, but I got an error saying this: [The content type of this image is not allowed.] Does anyone know why I can't send this ai file. It's not too big, it's only 194 kb. Anyway, my other question refers to th
-
To send IDOC to vendor from SAP for purchasing order
Hi Gurus, I want to setpu an EDI for send the outbound & inbound idocs to vendor for purchasing order from SAP and below are the message type I am using: Outbound message type : ORDERS Inbound message type : ORDRSP INVOIC I know how to set up the lin
-
I am trying to convert a downloaded MPEG-4 file in ITunes for use on my Ipod. The converter runs through it and when complete, I get a file with no video, just sound. Any ideas?
-
I'm trying to output a project into a CHM file using RoboHelp 8, and the resulting output completely lacks a Search tab. It's got a Contents tab, an Index tab, and that's it. (The project doesn't have a glossary, so the lack of glossary is no big sur