I need a List component that will display custom data. I want to extend a spark List or any List component and add my code to paint each item.
I done this in other frameworks but for Flex i found only simple examples that change the font and background color, i need access to a Graphics object to paint my items as i need,is there a method that i can override or some example /class i should look at?
All UIComponents has a 'graphics' property that you can draw to, however, I'm not too sure why you'd want to extend the list component just to paint each item. Each item renderer is responsible for painting itself. If anything, just use the normal List and specify the itemRenderer property to point to a custom item renderer of your own (that extends ItemRenderer) that can take in data and paint things accordingly.
Related
I have a requirement in the TreeView where I have to show down arrow image when tree is collapsed and up arrow image when tree is expanded and this is applicable for each parent item in the tree.
My UI will have only 1 column and this arrow images i have to show at the end of the row.
I am using QTreeView and I can see expand and collapse signals.But it does have only index arguement.But I need item rectanlge details to show the image at the end of the row.Could you pls suggest is there any way to achieve this?
Thanks,
The simplest way would be to use QTreeView::setIndexWidget (inherited from QAbstractItemView). With this method, you can set your own widget to render the nodes.
If you have more sophisticated requirements, you need to implement a custom delegate. Please have a look at the QAbstractItemDelegate Class Reference and Designing Delegates. By the use of delegates, you have complete rendering control over your items.
I would like my spark ItemRenderer to be able to render a varying number of graphical objects that depends on the user input. As an example, let's say that I want to render a set of ellipses on a line.
I've been using MXML for my most recent batch of ItemRenderers and have loved every minute of it, but I'm not sure how to accomplish the above goal with an MXML IR. In Actionscript I can acquire the list of ellipses locations and draw them programmatically in the updateDisplayList method. Is there an equivalent in MXML?
thank you for your help!
Of course you can place a DataGroup inside your item renderer and place there some graphical primitives like Ellipse driven by data provider. But from the performance point of view this implementation will be very problematic. I suggest you to override updateDisplayList() in your MXML item renderer and perform all the drawings there.
Hy!
I'm building a top view 2D map, that it's objects are stored on the server.
The kind of objects are 10 and might be a photo, label, button, lists, mix of them or labels with tooltips.
The component must request the "areas" that are missing on screen.
An area is 1000x1000 px and is cached in flex.
To move in the map, will be like in google maps (drag-and-drop)
I should be able to have another list and move objects from one to another using drag-an-drop on objects. Ex.: I grab an objects from a list and I move it on this map, I release the mouse button and the item is placed there.
Now the problem is: I build a custom component for this trying to emulate the item renderer for performance and recyclage, implement drag-and-drop on objects and request the areas that are missing?
or
I extend the List component from spark and I add some features as multiple kind of itemrenderers and use recycle on them. Of course it must be able to request the missing areas on the screen and cache it's data.
Maybe create a custom layout is needed too.
What I need is something that must be really fluid, so the lighter this component is, the better!
Thanks for your help! (:
UPDATE:
*There will be not any object over another.
*I will not use hitTest on bitmaps because all bitmaps are wrapped in another component,as they,for now are itemrenderers.
Anyway I already begin to do this using a class that extends the SkinnableDataContainer and a custom layout. As the layout is not like a grid, is sparse, random items at diferent points(x, y).
Now I have this problem: https://stackoverflow.com/questions/4192934/how-to-get-the-localx-and-localy-relative-to-item-renderer-and-not-to-the-spark
Maybe you could use a combination of some of the following:
A canvas background (for layered components), looks fluid if using hitTest. Split up the canvas using constraintColumn/constraintRow for a grid layout.
Use hitTest (on items bitmapdata) for collision detection, and move the items to a new position (if items are dropped on top of one another).
Use a combo of mouseDown, mouseMove, mouseUP (example here) for drag n drop.
Use a 2D/3D indexed array to track the position of items (example here)
I have a Flex list and a custom ItemRenderer. I'd like to be able to have some items in the list use a different ItemRenderer (say, depending on the class of the item). Is this possible?
E.g.:
<s:List dataProvider="{_systems}" itemRenderer="myItemRenderer"/>
Most items in _systems use myItemRenderer. But if element 3 of _systems is "specialSystem" the renderer would be "specialItemRenderer".
Is this possible?
Use an itemRendererFunction.
Here is a blog post tutorial on that. I also touch on this here.
You use Canvas as ItemRenderer and implement mechanism which will create other controls automatically.
More details you can find in this article: Different Items renderers in List
The main idea:
You create special ItemRenderer which
can create "emulate" other controls,
in our case it is subclass of Canvas
which simply creates and adds desired
control. Then we need some mechanism
to tell our container which renderer
we want to emulate, for this purpose we
use ItemContainerData with special
fields.
I'm trying to animate a list as I delete the top row. All the examples I can find use itemsChangeEffect to bind to the effect, but this property exists only in MX lists, not spark lists.
Any idea how I can get the same effect done in Spark Lists?
I'm trying to remove the top most item in the list with a slight fade out effect before the rest of the items move up to replace the gap.
It is actually an effect, not a property. The internal implementation is very different, although the difference is masked when using them via MXML.
That said, this doesn't appear to be a feature of the Flex 4 List class. You can vote to have this feature added at ideas.adobe.com :
They intentionally remove itemsChangeEffect from Spark because one of the new features in Spark is that layout logic is separated from component so you can implement your own custom list layout with add/remove effects on itemRenderer. When a Spark container measure() or updateDisplayList() method is called, the task of measurement and child arrangement is promptly delegated to a Spark layout instance.