Adding many images to HBox causes display problems in Flex - apache-flex

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.

Related

How to temporarily hide elements while designing in Gluon Scene Builder?

I have complex design that has several layers on top of each other. Problem is that if I click on object, other object that on top of it gets selected. How I can switch off visibility of my top objects while working on my bottom layer, so that they won't get in the way?
I finally found how to achieve what I wanted. Just select element that in the way and in properties remove tick from visible. Now you can design without anything obstructing your view! Just don't forget to make visible all elements before you save your work.

HBox children on top without changing layout order

I have created a Hbox with several Buttons inside as children. I want to increase one button size and be on top of others. Not as appreciated in the figure... I Have tried with children_button.toFront() but it changes the layout order.
Any help would be appreciated.
i am not sure if this works in an Hbox as I think toFront puts the Child on the first position of the ChildList in the parent Node. But this would mean that HBox would layout it on the very left on first place. So maybe they are overriding the default behavior in this Case? Just my guess

Flex ItemRenderer - how to tell when it's being reused?

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.

Resizing contents in TabNavigator in flex3

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.

Flex having a VBox with Vertical Buttons

I am trying to get a left hand like panel bar in my application, one much like the OneNote left hand(notebook) panel.
I have been trying to use a VBox with Buttons and setting the rotation on the buttons to 90. The buttons seem to disappear when I do this.
An example of what I am trying to achieve is here: http://www.rid00z.net/panelBarExample.png
What is the best way to achieve Vertically stacked buttons like this?
try putting all the buttons inside an Hbox and then setting the rotation of the Hbox to 90.
Oh and also make sure you rotate around using a point at the center.
I would create a custom component to do it. I would make each "button" a canvas and display text in it vertically (embedding the font you want to use to do that) - the canvas would have a click event - I would use canvas over a standard Button because it allows more flexibility. In this new component you would have functions to add or delete buttons. I can clarify if it would help.

Resources