I'm using a spark ItemRenderer in a list with useVirtualLayout="true"
The itemRenderer has an image loaded in it.
When the list scrolls, and a new Item is brought into view - the image flickers, briefly showing the previous image in the itemrenderer.
When the itemrenderer is re-used, how can I prevent the flicker?
Is there an event when an itemrenderer is discarded? then I could hide the image or load a blank image.
Try this
A simple way to avoid Flickering images is to give a height according to the total images to show
example
if the List have vertical layout
myList.height = myList.dataProvider.length;
if the List have horizontal layout
myList.width = myList.dataProvider.length;
It depends on how you use the image. I tend to load the image and save its BitmapData ONCE!. Then you can directly use it without any flickering. You just have to inject some sort of ImageRespository into the renderer.
This can easily be done by listing to the rendererAdd event of the DataGroup and stuff the repo into the renderer.
Related
I have dynamic list with 20~ cells.
I have 3 types of cells so i can't use Listview.
I am using ScrollView that contains StackLayout with the cell elements.
each cell element is also a StackLayout that contains some labels and buttons
the scrolling is smooth.
I have option in each cell to add image by a pressing a button inside the cell.
After the image is added, the scroll is getting very slow when arriving to the cell with the image.
when scrolling beyond the image, the scroll become smooth again
I have also tried TableView but the scrolling is not smooth when presenting the Cells (without adding the image)
How can i improve the rendering of the image ?
I have 3 types of cells so i can't use Listview.
Actually you can use a ListView, by using a DataTemplateSelector. As long as you have a collection containing all of the objects to be displayed, and each object in the collection indicates the cell type (usually because of it model's type), ListView with DataTemplateSelector will work great.
Whether you stick with ScrollView or move to ListView, look into FFImageLoading for displaying images if possible. While it doesn't solve all image display problems, it often does help with responsiveness and image size issues.
Hi I am working on tabNavigator in flex 3.
I have tileList within it. Contents in the tab comes dynamically so I cannot provide explicitly fixed height and width.
I need to resize the tabs depending on the contents within it.
To resize the tabs I have enabled 'resizeToContent' property of tabNavigator.For some reason it is not resizing as expected.
Could anybody please suggest me the way out of it.
Thanks
Hey thanks Gregor for you reply,
'resizeToContent' works fine for other child items in tabNavigator but fails when I use tileList as child in tabNavigator that time tileList resizes to its default size(4 rows are only visible). So i was wondering if there any way so that I can force tileList to display all its items without putting scrollbars after its default size.
just by invalidating size on creationComplete ,will that resize all tabs for me. I am having n-number of tabs in tabNavigator as user can add tabs and content within it.
Could you please explain me, how can I achieve this.
I am new to flex so just getting confused with its behaviorand struggling with this issue from long time.
resizeToContent only works when the user changes tabs. If you want the tab to resize once the content has been added, you need to listen for the appropriate event (creationComplete probably) and invalidate the size of the TabNavigator. That will give it an opportunity to resize itself.
I am not able to figure out how to zoom the image displayed with the help of an item renderer.If i apply the Zoom effect on rollover ,the particular cell zooms the image with the scroll bars.Is their any other way of doing this without showing the scrollbars.
You'll need to duplicate the image and place it outside of the datagrid component. If it's inside the datagrid, it'll be forced into one of the rows. It might be helpful for you to look at the code for the DataGridDragProxy - it does does something sorta similar.
I am new to flex, and do not know how to add an image (or other ui component) to canvas, so user can select it (and see that it's selected), also I want to add a possibility for example to click backspace and remove selected image from scene. How to do that?
Maybe you can point me to a doc to read?
I am not sure what you exactly need.
Do you need to add one image to the canvas, or possibly multiple?
And how do you need to lay out these images? Horizontal? Vertical? Tiled?
One way of doing it could be to add a TileList to your canvas, and as dataprovider an ArrayCollection that holds the sources of the images you need.
Create an itemrenderer for the List or TileList and you will be able to display the images.
The images will then be selectable. When you add an eventListener to the keyDown event you can catch the backscpace button being clicked and remove the selected item from the tilelist.
<mx:TileList id="myTileList" dataProvider="{myImages}" itemRenderer="your.domain.MyItemRenderer" keyDown="{keyDownHandler(event)}" />
Adobe LiveDocs and a few of the words I used in this answer might help you further.
Hope this helps.
In Flex, I'm using an HBox to hold thumbnails. When more thumbnails are added than can be shown, the HBox becomes scrollable.
When I add more than, say, 80 images, when I scroll back to the first image, the images begin "tearing", until I hover my mouse over them.
This is how it looks when few images are added:
When many images are added:
Should I be using something other than an HBox to accomplish this?
HBox doesn't use virtual renders so I'd actually recommend a List based control like HorizontalList. You may also want to use Ely Greenfield's SuperImage to avoid flicker when scrolling.
Use a TileList.
It can use ItemRenderers which uses fewer resources.