A fairly broad question I know, apologies for that!
So I have a data set that I need to represent in a flex application. It needs to be represented in 2 ways, firstly as a list of components which is done using a List component and a custom ItemRenderer as normal. Secondly, it also must be represented as 'annotations' on a diagram in 2D. Since this doesn't really fit with a List, DataGrid, Chart etc. I think I need to create a new Component to render the data. I'd like to set it up so that you can specify 'itemRenderer' and 'dataProvider' properties on the component, exactly in the same way you would for a datagrid or list. The difference here is that each item of data will have mandatory X and Y coordinates which place it within the containing component.
My initial attempts subclassed UIComponent and implemented IDataRenderer but I'm unsure what other interfaces I need to implement to make the component properly data-driven?
I've already written a simple ItemRenderer / ItemEditor which will render each item of data correctly, I just need the component that will contain these....
thanks for any help
Why not just use the spark DataGroup, which lets you put things wherever you want?
Related
I'm pretty new to Flex and I don't know how to solve this problem.
I have 3 mxml components. In Component 1, I let the users fill in some data. In Component 3 I want to use the data, but I can't find a way to make it work.
Can someone help me, please? :)
I can show you code, but I think it would complicate the things a lot because it is data coming from a slider and the code is pretty long.
I feel like I answer this question on a routine basis. What is your display hierarchy?
Here are a few common things:
If component3 is a child of component1; then just pass the data in using public variables
If component1 is a child of component3; then wrap the data in a custom event and dispatch that event from component1 up to component3.
If component1 and component3 have the same parent, then combine the previous two approaches. Wrap the data up in a custom event, dispatch it to the parent. Have the parent pass the data down into component3.
A lot of frameworks make use of singletons and/or dependency injection; to help share data between components in more complicated architectures.
A quick Google reveals these sources; which seem to cover similar ground and may help:
http://www.actionscript.org/forums/showthread.php3?t=120330
how to use mxml component in another actionscipt
Pass data between flex components
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 multiple MXML custom components that I add on the fly (using a repeater) that is binded to an ArrayCollection. So everytime I add/remove item from the ArrayColleciton new items show/disappear from the screen.
Is there a straightforward way to make item fade in when they get created and fade out when they are removed? I thought of using states and state transition effects but that will make things a bit complicated at different part of my application for those components to manage the states.
You need "Data effects" not "State Transitions". Creating the effect is the same, but the way you set it up is slightly different. Take a look at this list:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2#top
Specifically, you'll probably want to use addedEffect when something is added and removedEffect when something is removed. You may also want to investigate hideEffect and showEffect .
So, instead of creating a transitions array, you'll set the effect like it were a style in ActionScript. In MXML, set it like it were a property on the component.
And I strongly recommend not using repeaters if there is any chance your data will scroll off the screen. A repeater will renderer every element in your dataProvider. A list, will only render those elements that display on screen. Lists are much more effecient in this regards.
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.