I have a list which displays votes cast on things in a descending order (=the dataprovider has a sort assigned).
The elements have variable height, but there are not so many elements, so i do not need to use a virtual layout
My problem is that this list needs to be updated real-time and i want to make this happen with a nice animation.
(e.g. if an item overtakes another by votes, then they swap places.)
Anyone knows how to make this animation with Flex 4.5 (spark list)?
Do i need to write a custom layout?
Thanks
If I were you, I'd just create a custom component which would have a simple layout (VGroup, maybe within a Scroller if you need a scrollbar) which then dynamically add item renderers to it. The thing about this one though is that your item renderer never changes it's data property. Make sure that the item renderer uses binding for it's data, and then on whatever you're sorting, have an animation between indexes of 2 items, make sure you set 'includeInLayout=false' before the animation for both items and just tween between their positions.
There are other ways of doing it using List, but then you'd have to make duplicates of the item renderers for the animations while the real ones are hidden and change their values. Not sure which one would be best in this case...
Related
For example, I've created 2 horizontal lists with different heights: 50px and 100px.
I'd like to use 1 item renderer to display both.
The item renderer has to create square items, so it has to produce 50x50 items for the first list and 100x100 items for the second one.
How should I set up the item renderer to get the result?
It is always the parents responsibility to size it's children. In this case, the list is the parent and the itemRenderer is the child. The best you can do is offer suggestions in the way of measuredWidth and measuredHeight.
So, you could override the measure method of your itemRenderer component to set the values (50x50 or 100x100) based on some criteria. But, what would that criteria be?? We don't know because it wasn't provided inyour question. In an ideal world, it cannot be the height or width of the List; because the itemRenderer should know nothing about the list.
Ignoring the itemRenderer for a moment...
In an MX List, you can use the rowHeight property.
In a Spark List, you can set the rowHeight property on the List's layout.
You may be able to use a typicalItem on the List class instance.
I think these approaches are more likely to give you the results you want than doing something in the itemRenderer.
I have a table view in PyQt that needs to have an image in every cell.
I have used delegation of a label (and added a pixmap to that label). But the problem is when I add 12 cells (12 images of size 60x30 pixels), the table becomes too slow, and I need to have a table that contains hundreds of images. Should I be using another delegation? Or is it just not doable with a table view? If so, what is the best widget for such a task?
Any answer for Qt or PyQt would be highly appreciated.
I think you should try using QGraphicsView for your purpose. Its much faster to render images on it.
One clever way to do is created a huge graphicsitem which mimics a table based on ur rows and columns count.
then add children graphicsrectitem item as each cell container.
lastly add the images as qgraphicspixmap item as children of the rectitem. this way u can make it quicker and also interactive since u can select them individually and also make them movable inside the cell by user by checking collision detection to make sure they are not pulled outside the cell boundary.
hope that provides u an alternative.
QListView provides an icon mode where you can stack your images in a grid.
I have the following scenario :
A Flex 3 DataGrid is sitting here
At runtime, a column is added to this grid
The column has a custom ItemRenderer
The ItemRenderer inherits from HBox, and adds a few items to the HBOx dynamically
My problem is that the width of the column doesn't change. As a consequence, my column stays small, and an ugly horizontal scrollbar is displayed in the line, instead of my content (which is completely unreadable).
I would like the column to adapt its width to the content of the HBox in the ItemRenderer. I tried the following :
Setting the 'percentWidth' of the ItemRenderer to '100'
Invalidating the properties of the ItemRenderer after adding the items
The only thing that has a "visible" effect it to force the width of the DataGridColumn. Obviously this is not acceptable since I'm dynamically adding components to the ItemRenderer, and I don't know how many or how big they are.
Besides, when I am in the ItemRenderer, I have no access to the column itself (or do I ?) so I cannot force the size of the column from here.
So is there a way around this ? Would AdvancedDataGrid help here (notwhistanding the fact that I cannot really use it for other reasons ...)
Alternatively, I would be happy enough if someone has a solution where the column cell is displayed without the ugly horizontal scrollbar (don't mention setting horizontalScrollPolicy to "off", been there, tried that, lost shirt ;) ).
Thanks
PH
I did not found a solution for the size, however I found the way to remove the scrollbar ; you must put the "horizontalScrollPolicy : 'off'" in the list of properties of the itemRenderer Factory (rather then on the itemRenderer itself).
I'm developing on Flex 4. I have a datagrid container and custom itemrenderer with a text field, a button and a few boxes. Every time some data is displayed, the app stalls for a second or two before rendering completely. Is there any way to make it render more fluidly or render one after another...?
Is your renderer setting percentage-based dimensional information in a commitProperties() or updateDisplayList() override? For example, if you set a percentWidth and percentHeight, you want to do that only once, so do that in the constructor.
If you do it in another method that gets called over and over, your whole grid will be resizing and rerendering each cell until every cell has been satisfactorily sized and measured. So if your grid is 10 columns by 20 rows, that means it has to render completely at least 200 times before it's happy with its cell dimensions.
I have a quick question about rendering the advanceddatagrid cells.
I need to programatically color the cell of the datagrid based on the conditions. Lets say, the stock quotes. If there is an increase from the previous day, I need to have the cell colored in GREEN and in RED, when there is a decrease.
Now, the important part here is, I need to do these things dynamically, which means, when the user enables the comparison/conditions, then the cells are colored. And when the user disables the comparison, then it again goes back to its default behavior.
I know I have to use renderers. But not sure, how to use it for the cells and that too dynamically. Can anyone please explain how to go for it?
Thanks
Item renderers are components used to define the appearance of a component's "items" or subcomponents. In the case of the ADG, the "items" are the individual cells. You can create a completely custom class to function as the renderer (given it implements certain required interfaces) or, in most cases, you extend an existing component. Since the default renderer for ADG cells doesn't support background colors, you have to create or extend a component that does and use that as the renderer. That is the basic premise that these tutorials, linked to in the following question, work from:
Setting background color for datagrid row in Adobe Flex
After creating an itemRenderer that supports a background color, you have two options as to where you can define your "conditions"; inside of the itemRenderer or using the ADG's styleFunction (additionally requiring that your itemRenderer defines a "background" style).
In your case, you could include both today's and yesterday's stock price values in the data sent to each cell and compare the two to determine the color used to draw the background. Again, more on that in the tutorial links provided above. In either the itemRenderer or the styleFunction, you would compare properties on the itemRenderer's/styleFunction's data object (corresponding to the row you're looking at), e.g.:
if(data.today > data.yesterday)
{
// set color or return style
}
else ...
To "toggle" custom cell colors, switch between your custom renderer and the default (colorless) renderer. In other words, set the itemRenderer property to your custom itemRenderer class when you need display the colors and set it to "null" when you want the "default behavior".